Streaming live at 10am (PST)

How to create background image with Image element and Div Block

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

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:

1 Like

Thanks, Vincent, I’ll experiment with that!

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