How to make hero background photo responsive

Gianni_Marino · February 25, 2021, 9:51pm

I’m somewhat new to webflow and am having trouble with my hero section. I have a full screen background image that I created in photoshop that I need to be responsive. When I add it as a background it doesnt sccale responsively like I would like. VH and VW doesn’t work. It just cuts off parts of the image. I tried experimenting and added it as an image instead of a background and it takes up the full width of the screen and scales perfectly. Now my problem is not being able to put any divs or the navigation bar over the image. Basically using it as a background. Does anyone know if this is even possible and if not, how do I get my background image to scale responsively like an image element?

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

Gianni_Marino · February 28, 2021, 12:23am

So I ended up figuring it out with experimenting later in the day and wanted to answer my own question incase anyone needs help with this in the futue. In my hero section I created a div and in the div I added an image element with the background photo I wanted, so hero > hero-background-div > image

Then in my hero section I created another div for my content so hero > hero-content > hero-content - container: nav-bar : heading div.

I know this seems confusing but bear with me. I’ve also attached a photo. So the hero content div i set to absolute and full. It ends up taking all the space of the hero section so the background image and hero content section dont block on top of eachother. Oh and make sure your hero-content-container is set to relative so the children position to it. The child Div Block 2/Heading div is positioned with relative with a top margin of 45%.

This was the only way I could figure out how to make a scalable background image, but if anyone knows an easy way please let me know. Hope this helps!