How can I place an image on top of another image in Webflow?
TL;DR
- Place both images inside a div with relative positioning.
- Set the base image to static position and the overlay image to absolute; adjust its position, size, and Z-index as needed for proper layering.
To place an image on top of another image in Webflow, you need to use position styling to layer the images. Here's exactly how to do it:
1. Add a Wrapper Div
- Drag a Div Block into the canvas where you want the layered images.
- Give the div a class (e.g., "image-wrapper").
- Set its position to Relative. This makes it the reference point for absolutely positioned children.
2. Add the Base Image
- Inside the wrapper, add an Image element.
- This will be your background or base image.
- You don’t need to change the position style—leave it as Static so it fills the wrapper normally.
3. Add the Overlay Image
- Drag another Image element into the same wrapper, directly after the base image.
- Select it and set its position to Absolute (Top-Left selected by default).
- Adjust the width, height, and position offsets (top, left, etc.) manually or using padding/margins, so it’s in the desired location over the base image.
4. Optional: Adjust Z-Index
- If for some reason the overlay image hides behind the base image, set a higher Z-index (e.g., z-index: 1) on the overlay image.
- Make sure the base image has a lower or default Z-index.
5. Make It Responsive
- To ensure responsiveness, consider setting widths in percentages or using flex as needed.
- You may also apply max-widths to limit image scaling beyond a certain point.
Summary
To layer one image on top of another in Webflow, wrap both inside a relative-positioned div, set the overlay image to absolute position, and fine-tune with Z-index and spacing. This method ensures controlled, responsive layering of multiple images.