Background image not fitting to screen

Hi there,
I am really having problems getting my hero image to fit my landing page and I hope someone can help me cos I am seriously frustrated and this still happens.

https://preview.webflow.com/preview/denises-awesome-project-68c872?utm_medium=preview_link&utm_source=designer&utm_content=denises-awesome-project-68c872&preview=010ce69331c4d8de05002c466ca0d470&mode=preview

As you can see I have to scroll down to see the entire image for the desktop version. I have tried different ways of trying to get it to fit but nothing works. For example:

  • setting my image to a background image, using cover fit and then changing it to 100 VH.

  • add a div block, changing it to cover fit

  • adding a section and then changing it to cover it.

I know I am doing something wrong but i can’t figure it out.
Is it the size of my image? It is currently at 4320px (w) 2880px (h) Can someone please help me?


set your width to 100% on the image , if you use 100vh then it will scroll up slight due to the nav bar. unless you set the nabar to fixed then it will sit over the top of the image and take up 100% of the VH with no scroll. But you have to give a background image a width

Hi Jeremy,
Thanks for your reply, I have tried to do as you have suggested but I’ve run into a few problems when I go into responsive mode. On the desktop version, my picture is slightly clipped and when i go into tablet and thereafter, I can’t see the items on the right side of my hero image. I’ve set the fit to Cover.

https://preview.webflow.com/preview/denises-trendy-project-040348?utm_medium=preview_link&utm_source=designer&utm_content=denises-trendy-project-040348&preview=6cb4a8e4d836c0dac3e5f90fa1b65864&mode=preview

I have also tried setting the fit to Contain and when I go into responsive mode, I get this. In responsive mode for desktop I get two white gaps in desktop mode but the rest of them are fine.

you probably dont want to use 100 VH on anything else than desktop. the image will get clipped on the sides depending on the screen size on desktop. But it shouldnt be drastic. Think about most screens as a 2:1 ratio. maybe 16:9 so the closer your image is to that width the better it will look and crop less on desktop/laptops ect. cover means the image covers the entire container it is set to. contain will either give white space on the side or bottom depending on screen.

for tablet you may only want 50vh. or 40. play around what looks good. same for mobile maybe 25-30vh. the rule of thumb for background images I use is to get it looking good on most sizes. it wont be perfect on all. desktop has the widest range to contend with. from over 2000w down to 900w

I hope that makes sense.

ah ok. i see what you mean. i’ll play around with the VH’s for the rest of the responsive designs and see how it goes.
Thank you so much for your help and prompt responses. I really appreciate it. Have a good day!

1 Like