Stretch body background image to full cover always

[loewenkunst (Miriam Peters)]

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 Peters)]

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 Peters)]

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