How can I place an image on top of another image in Webflow?

You can overlay one image on top of another in Webflow using absolute positioning or flexbox. Follow these steps to achieve it.

1. Add a Container for the Images

• Drag a Div Block onto the canvas.
• Set its position to relative in the Style panel (this ensures that positioned child elements adjust accordingly).
• Set a width and height to define the container size if necessary.

2. Add the Background Image

• Drop an Image element inside the div.
• Style it to width: 100% and height: auto to make it responsive.
• Alternatively, set the div’s background to the image using the Background Image property (good for layout-based overlays).

3. Add the Overlay Image

• Drag another Image element into the same div.
• Set its position to absolute so it moves freely inside the div.
• Use top, left, right, or bottom values to position it appropriately.

4. Adjust Image Size & Placement

• Use the Width and Height settings to resize the overlay image.
• Use Z-index to control layer order (a higher value keeps it above the background image).

Summary

Wrap both images inside a relative Div Block, place the overlay image with absolute positioning, and adjust size, position, and z-index as needed.