I am working on a site and I have the hero set with a background image set to cover and the height 100vh. If the browser height is resized the image no longer covers and instead the background is white when scrolling down. I am not sure what is causing this.
Here is a screenshot of the issue: http://cl.ly/1i0b2P0V0v1s
Here is the live site: http://get-reset.webflow.io/
Here is my preview link: https://preview.webflow.com/preview/get-reset?preview=8ff60d033693730c46586171f52da7e6
100vh on a section can be hard to handle. 100vh is 100 percent of the browser window, so the hero section is acting as it should. The problem is that when the height shrinks the content in the hero section becomes greater then 100vh and overflows the hero section. For the lower view points switch the height to auto.
You’re in a tough spot for screens within the desktop view port that have short screens. You could consider moving some of the content out of the hero section.
thanks for the response…but i also played with setting the height to auto…as well as setting it to 100% and encountered the same issue. i have seen a number of sites across the web with a full background image that resizes with the window. that is what i was hoping to accomplish but that doesn’t seem to be the case here. i thought having the image set to cover would do it. any thoughts?
I changed the hero section to auto on your live site, using the inspector tools and couldn’t get a white space to appear.
If you also want the content within the hero section to shrink when the browser height shrinks you will have to apply vh and vw units to the content. I haven’t had much luck with that approach, I find it hard to control what the content does and when.
thanks so much…i am going to test it again…also what browser did you use? if i remember correctly i think when i set it to auto it worked in chrome but didn’t work in safari.
edit: just tested it and it works in chrome but in safari there is whitespace below. any ideas?