How to build elements on top of a static hero image in the background

Design help General
1

Hi everyone,

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.

I’d really appreciate any help!

2

Hey Edward_Powell-

Mind sharing your Read only link so I can take a look? Thanks!

3

Hi there,

Here’s a link to the read only site (but keep in mind that I really haven’t put anything on there as I’m stuck on the first step): https://preview.webflow.com/preview/edwards-blank-site-143218?utm_medium=preview_link&utm_source=dashboard&utm_content=edwards-blank-site-143218&preview=7ea4f60bcabe539ebd89bdce358a19d3&mode=preview

The idea I was trying to imitate came from this website: https://www.justinrose.com/
If I could figure out how to get something similar to this website I would be incredibly thankful!

Cheers

4

Great thanks!

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!

1 Like
5

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.

Thanks so much again!

6

No problem! For mobile if you resize the image down to 50vh or so you should be able to see more of the image.

1 Like
7

How does one resize the image for just the mobile site? I’m looking for an option and I can’t find one in the editor.

8

You can edit the same width setting that sets it to 100vh on desktop. Changing it from 100vh to 50vh on mobile will not affect the desktop styling.

9

I’ve tried doing so, but I can’t seem to get it to work. The image keeps on getting chopped off when resizing the viewport to a mobile size.

10

I’d maybe try changing the positioning in the background image settings from Fixed to Not Fixed, if it’s not already

1 Like