Stretch body background image to full cover always

[loewenkunst (Miriam)]

Hello everyone,

I have a body background image that I want to stretch from top to bottom, and from left to right. The image is a colour gradient, but a special one that can’t be created via the native gradient function in Webflow. It can be squished and streched, I don’t care - I just want it to always be entirely visible. Now Webflow seems to be too nice and always tries to keep the image in its perfect aspect ratio, and I can’t see how to change that.

I thought it should work when setting it to “Cover”, but theres always a little space left at the bottom. The closest I got so far is setting it to “Custom” with width and height set to auto. But switching to mobile view, it doesn’t get “squished” and parts of the image go missing.

I can’t share a link because the project is not official yet - I hope my explanations are clear enough.

Does anyone know how to set the image the way I want, disregarding aspect ratio?

Thank you

[Stan]

Hi @loewenkunst there is no reason to not share public link. But if you have specific reasons just create a copy and delete everything but problematic part. I have doubt that anyone will be able to help you without look on your problem from Designer.

[loewenkunst (Miriam)]

Hi Stan, well I think I gave a pretty good reason not to share it in my post, didn’t I? It’s a project for a company that isn’t launched yet, so it can’t be online or shared in any way. But I also think my question is pretty straight forward: how can I set a background image so that it is fully filling its parent, disregarding the original aspect ratio?

[Stan]

No problem at all, you make it clear.

Responsive images in Webflow | Webflow University

Object-fit support | Webflow Features

Good luck

[iDATUS (mthornton)]

Miriam, good question for those reading these are the settings for background

I had a little play and you are right it keeps the shape of the object.
This is not like the fill attribute on an image element.
My guess is that’s by html design to reduce cpu load.
Now what you could try is use image and positioning.

[loewenkunst (Miriam)]

Hey iDATUS, thank you for recreating my problem! So you mean instead of using the background image function, I add it like a regular image?

[iDATUS (mthornton)]

Just had a go and here is a suggestion

[loewenkunst (Miriam)]

Hey iDATUS, thank you for your help. I think I finally found a solution that works for me. I did as you suggested and put everything in a page-wrap, but then I did not put the image as element but as background-image of the page-wrap with option “cover”, and that works perfectly fine. I think the problem with the body is that it seems to only consider the viewport, so if the background is set to 100% height, it is 100vh. A normal div does not do that as it seems.

[iDATUS (mthornton)]

Thanks for the come back.
I have been playing a lot with sizes etc to fix responsive and things don’t always work the way you expect do they.
One thing I found is padding with images is not a good idea, use margin.
If you need to use padding, put the image in a div and pad that.

Just some general extra information.