I’m very new to web design in general, so please have patience with me.
I’m trying to create a minimalistic landing page with just a static photo of an athlete as the hero image in the background, and then I’d like to place all my other elements on top of the photo with a separate footer (the image also needs to be scalable for mobile websites, of course).
I’ve tried setting the background both straight in the body, and in a separate section, but I can’t get things to look right, nor can I get things to behave properly when I add the footer.
So I think what you want to do here is set the background image to “cover” instead of custom, that will keep the image from getting skewed. Then, you can change the positioning on the background element from absolute to static and set the height to 100vh which will make the element the full height of the viewport. See the video below. In there I also switched the footer to static so you can scroll down to it. Hope that helps!
You’re a hero! Thanks so much. Now I’m curious, is there a way for the image always to be centered on the face, no matter how it’s resized? Otherwise on mobile view all you see is a bit of green grass.