Background image help

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.

@DharmaNode thanks so much! This was driving me insane!

Great! Glad i could help :smiley:

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…

http://hunters-seat.webflow.io/

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… :sweat:

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 :smiley: now I got it

So you need to apply background image to body, not to the section or div :wink:
Make it “fixed” and “cover” and you will get what you want

1 Like

@Sabanna Ahhh! I knew there was a simple fix! Let me try that! Lol, stinking Mondays!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.