Hello!
So I want my background image to be fixed but I want it to resize to fit whatever size monitor it’s on so there isn’t access white space at the bottom of the screen. How can I achieve this? It’s driving me insane!
Hello!
So I want my background image to be fixed but I want it to resize to fit whatever size monitor it’s on so there isn’t access white space at the bottom of the screen. How can I achieve this? It’s driving me insane!
If you want the image to fit the whole screen, set the height to 100vh. VH stands for viewport height. You can also use vw if you want a certain object to fit the whole width of the screen.
Great! Glad i could help
Okay so this doesn’t work… Unfortunately when you minimize the screen (yes it is full width and height) BUT when you scroll down it’s all white space now…
Could you share your read-only link, please?
@Sabanna https://preview.webflow.com/preview/hunters-seat?preview=dbd0183a7b4dffbcf31d6890dc1abfc8
Thanks!
Do you want the background image to be static and fixed to function as a background for the whole site? if so, you can change the 100vh in the mainsection class to auto.
Well, I am not quite sure what kind of resizing you meant.
Here is video shows how to fix the issue - YouTube
At the end I showed how to make background “resize” not only on the width but on the height too.
Hope it helps.
Cheers,
Anna
@DharmaNode @Sabanna it’s still not working; I’m trying to get it height wise… no matter what I do (it needs to be fixed so the back doesn’t move) and full height… but without crazy stretching it…
See all the white space? No matter what I do it’s not working height wise… and when I do the 100VH for height, and if I shrink the screen the white appears still…
Ooook now I got it
So you need to apply background image to body, not to the section or div
Make it “fixed” and “cover” and you will get what you want
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.