Webflow sync, pageviews & more.
NEW

How can I make an image in Webflow overflow on both the top and bottom of a div/container, without extending the height of the div/container?

TL;DR
  • Set the container to relative positioning and ensure its overflow is visible.
  • Absolutely position the image inside, expand its height (e.g., 200%), and use vertical centering or top/bottom settings to make it extend beyond the container.

To make an image overflow both the top and bottom of a div or container in Webflow, without increasing the container's height, you'll need to use absolute positioning and control overflow behavior.

1. Set the Container to Relative Positioning

  • Select the parent div/container you want the image to overflow from.
  • In the Style panel, set Position to Relative.
  • Make sure the container has a set height or is sized by its content—do not let it expand due to the image.

2. Add and Style the Image

  • Drag an Image into the container or add it via an Image element.
  • In the Style panel, set the image’s Position to Absolute.
  • Choose Top: 50% and transform it with TranslateY(-50%) to center vertically, then:
  • Set a height larger than the container (e.g., 200%) to make it visibly overflow both top and bottom.
  • Ensure Top: 0 or use both Top and Bottom values next to control placement.

3. Allow Overflow

  • Make sure the container does not have Overflow set to Hidden.
  • If overflow: hidden is active, the image won’t be visible outside the container.
  • Set Overflow: Visible on the container if you want the excess image to show beyond the top and bottom edges.

4. Optional: Layering and Z-Index

  • Use Z-Index values to manage the stacking order if the image overlaps other content.

Summary

Set the container to relative positioning, absolutely position the image within it, increase its height, and ensure the container’s overflow is visible. This allows the image to freely extend above and below the container without resizing it.

Rate this answer

Other Webflow Questions