How to create background image with Image element and Div Block

Design help General
1

Hello all,

Since Webflow doesn’t currently optimize background images for mobile, I’m experimenting with creating my background images using an Image element inside a Div Block instead. However, I’m getting stuck with the responsiveness, and would very much appreciate any help that anyone can provide.

I insert a Div Block, set its Display to “Flex” with both Horizontal Align and Justify to “Center.” I set its Position to “Fixed–>Full” with a z-index of -1 to sit behind everything else on the page. I then insert an Image element, choose my image asset, and set the Image element’s Size Height to 100VH.

This results in the behavior that I want on desktop, but as soon as the viewport’s width contracts beyond my image’s original ratio of 16:9 (on tablet, for example), the image starts to get compressed inward horizontally.

The functionality that I’d like is that on smaller viewports, the image’s original ratio dimensions are preserved, and the image merely begins to stay centered and crop inward from all sides (the same way that Webflow’s background images behave). I’ve been scratching my head about what sizing parameters I need to set to enable this.

Thank you very much in advance, and if anything that I wrote is unclear, please just let me know!

Best,
Toryn

Here is my site Read-Only: https://preview.webflow.com/preview/toryn?utm_medium=preview_link&utm_source=designer&utm_content=toryn&preview=907d354ea78565c7e60b5c6ae9940c7d&pageId=5d24985460878d501f584e33&mode=preview

2

Can’t you experiment with CSS object-fit too?

Add this code in an Ambed component within the page:

<style>

.fit {  object-fit: cover; width:100%; height:100%;}

</style>

Now add the class .fit to any image, as a single class or combo class. It will then behave like a bg image set to cover, but will be an image, hence it will be optimized by Webflow and you can set an alt=“” to it.

Seen at the bottom of this page:

2 Likes
3

Thanks, Vincent, I’ll experiment with that!

4

you can do this in style and you can use PNG transparent for background image.

5

Thank you for this!
For anyone wondering, you can also achieve this without the CSS code.

Just set the image to 100% w & h, fit to cover, position to absolute (0% on each side), and -1 index.

4 Likes