Is it possible to have a background image in a div, set to "cover" and placed within a div set to "overflow hidden", that reacts to different image proportions and fills either the height or width while cropping to the center, using Webflow?

Certainly! You want to achieve a flexible background image that covers a div, even when nested inside a div with overflow hidden. Here's how to set this up in Webflow. 

​

1. Add a Div for the Background

• Drag a Div Block onto your canvas to hold the background image. 

​

2. Set Background Image Properties

• Select the Div Block and go to the Style panel.
• Under Background, select Image and upload your desired background image.
• Set the Image Fit to cover to ensure the image scales while keeping its aspect ratio.

​

3. Ensure Correct Positioning and Sizing

• Still in the Style panel, set Position to absolute for the Div Block with the image.
• Align the image to center both vertically and horizontally, ensuring it crops from the center when necessary.

​

4. Contain Everything Inside an Overflow Hidden Div

• Drag another Div Block onto your canvas, which will act as the parent container.
• Set the Overflow property to hidden for this parent Div Block. This will ensure any part of the background image that overflows is cropped.

​

5. Test with Different Proportions

• Preview the page to see the effect of different image proportions.
• Ensure your container Div has a fixed or relative size to test how cover fills the height or width based on the proportions of the images.

​

Summary

Use a Div Block with a background set to cover inside another Div with overflow hidden to maintain the image's aspect ratio while cropping to the center. By setting the child div to absolute and center, it will adapt to different image proportions appropriately.