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?
TL;DR
- Use a Wrapper Div with fixed or relative size and set its overflow to hidden.
- Place an absolutely positioned Background Div inside, set to fill the Wrapper Div with background-size: cover, background-position: center, and no-repeat.
- Alternatively, use a single Div with these properties if no inner content is needed.
Yes, it's entirely possible in Webflow to have a background image set to "cover" within a div that uses "overflow: hidden", and for the image to dynamically crop to the center based on its proportions.
Here’s how to configure it:
1. Structure Your Elements
- Place a Div Block (let's call it Wrapper Div) where you want the background image.
- Inside the Wrapper Div, add another Div Block (let’s call it Background Div) where the background image will be applied.
2. Set Up the Wrapper Div
- Set a fixed width and height, or allow it to adjust with relative units like
%,vw, orvh, depending on your layout needs. - Set
overflowtohiddento crop content that overflows the Wrapper Div.
3. Configure the Background Div
- Set Position to
absolutewith top: 0, bottom: 0, left: 0, right: 0 to make it cover the entire Wrapper Div. - Set
z-indexto -1 if needed, to place it behind any foreground content. - Apply your background image directly to this Div.
4. Apply Background Properties
- In the Style Panel, set:
- Background Image: Choose your image
- Background Size: Cover
- Background Position: Center Center
- Background Repeat: No Repeat
This configuration ensures:
- The image fills the available area while maintaining aspect ratio.
- Cropping occurs equally from the top/bottom or sides depending on the image proportions.
- The image is always centered, so you don't show blank spaces around it.
- Any overflow beyond the wrapper is hidden properly.
Alternative: Use One Div Only
If you don't need inner content, you can apply all settings directly to a single Div:
- Set fixed dimensions + overflow: hidden
- Set the background image with
coverandcenter center
Summary
Yes, using background-size: cover, background-position: center, and overflow: hidden on a containing div, you can crop any image proportionally and center it within a div in Webflow—no custom code required.