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!
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