Streaming live at 10am (PST)

Full screen images that don't get cut off and move

The site I’m building is very image based. I have added these images as backgrounds, (cover) to the sections. However, when the browser window is moved around the image moves and gets cut off in places (grabs attached). Using contain instead of cover means the images aren’t full screen. The images can’t be part of another image - it has to just be the single image which is fullscreen. Please can you let me know how I can add full screen images that will not react in that way so tops of heads don’t get cut off etc.?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@sparky - Try setting min-height on the section.hero for different breakpoints.

Thanks for the suggestion.

If I set the min-height for the section hero in pixels it does mean the image won’t be cut off but the full image won’t necessarily fill the screen. Ie. less of it will be seen on smaller screens. It would also be possible to scroll the page which I’d like to avoid. If I set the min-height using 100vh it just stays as it is unfortunately.