Hey guys, I’ve just started learning Webflow and couldn’t figure out how to make this work. Any help appreciated!
I’m trying to make a landing page with the background image taking up the whole view port, and the navbar on top of it. I set the background image as the background of “Body”, “Custom, 100VW, 100VH, Don’t tile”. However, when I increase or decrease the size of the screen (still desktop version), the height of the background image is not always the view height.
Thanks Shawn! Actually I set the mid width and mid height of both the background image and the div containing the bg image to 100VW and 100VH, but it still doesn’t show the full height. Looks like the height of the bg image depends on the height of the hero section on top of it.
As you can see in the link, the hero section is the same size as its contents, it’s not tall enough to show the whole bg image so the about section below it is covering part of the bg image. How do I fix this pls?
When I was referring to setting your min height and min width to 100vh and 100vw, I was specifically referring to CSS property called “min-height” and “min-width” which can be adjusted here.
Why the way you did it did not work is because:
You set the HEIGHT property (not min-height) to 100vh. That means that the height of your hero section will be exactly 100VH not more, not less. As such, when the content has to overflow it, it just well, overflow, without having the hero section increasing in height with it.
However, when you set the MIN HEIGHT property to 100vh, it means that the hero section (even with no content in it) will have a height of at least 100vh. If there is lots of content in the hero section causing it to extend outside of the height of it, the hero section will expand accordingly to contain the content properly.
Let me know if there’s anything you still can’t get with this.
Bonus: Instead of having a separate div for your hero BG image, you can set the BG image directly to your Hero section.
Bonus Bonus:
I see that your hero BG image might be a darker version of a previously uploaded image. You can not only set the Hero BG image to be your desired image, you can also overlay colors on top of the image, and adjust the opacity/color. E.g. Below, I add a red overlay on top of the Hero BG image.
Hey Shawn, I actually tried both min height and height as 100vh, I guess it didn’t work because of the padding/margin in the hero section, now it works thanks to Siton’s solution. And thank you for the suggestion to set the bg image as the bg of the hero section, I’ve done it and it works perfectly!
