Responsive full size hero image with the navbar in front of it

Hi.
I wanna make the hero image responsive in a clean if possible, and I dont found the right solution, any idea?

Read-Only link:

https://preview.webflow.com/preview/pbh-2021?utm_medium=preview_link&utm_source=designer&utm_content=pbh-2021&preview=e18fd27c141796e6bec9c6c8a67959d4&workflow=preview

Welcome to the community Jeremie!

I just took a look at your project and noticed that you still had the hero image you are using as a background in the “Hero Humain” div block set to Custom values under the background image settings instead of Cover. I noticed that in the style panel of the div itself you set the Object Fit to Cover however this will not affect the background image behavior. This input will at least stop your hero background image from squeezing and distorting as the viewport is resized. However, I did notice a number of elements using margin for positioning. This can work but may not offer the most responsive experience. I would suggest you check out Webflow University to explore more of the basics of positioning including flex box and grid, absolute, fixed, sticky, and relative to help you achieve a more responsive outcome.

1 Like