How do I overlay text on an image in Webflow?

Make the photo's parent the reference

Every element starts at static, in normal document flow. Absolute text needs a parent that is not static, or it positions against the body. Select the Box that contains the image. In the Style panel, set Position to relative. Do not add a top, left, bottom, or right offset unless you mean to nudge that Box. Webflow's position article says a relative element with no offsets stays where it was, because it is positioned relative to itself.

Put the image inside that Box and leave the image on static, or on relative with no offsets, so the image still takes up height. The Box grows with the image. The text will not have to invent a height for the section.

Example: a hero Box holds one photo of a workshop and a heading that should sit in the lower left of that photo. The Box is relative. The image stays in the flow. The heading is the piece you will pull out of the flow.

Set the heading to absolute

Select the heading. Set Position to absolute. Absolute removes it from the flow. It no longer pushes the next section down, and the image does not move to make room for it. The top, left, bottom, and right values are measured from the nearest ancestor that is not static. The relativity indicator in the Style panel names that ancestor. It should name the hero Box. If it says Body, the Box is still static, or the heading is not inside the Box.

Presets for absolute and fixed elements set those edges for you. Top left is top 0 and left 0. Bottom left is bottom 0 and left 0. Full sets top, bottom, left, and right to 0, so the element covers the whole parent. For a heading in the lower left, choose Bottom left, then add a little top or left space if the words touch the edge. Increasing top pushes the element down. Increasing left pushes it to the right. Increasing bottom pushes it up. Increasing right pushes it to the left. A negative value moves the opposite way and can leave the parent.

The heading can be a short line, such as Spring workshop. Keep the photo as the element that gives the hero its height. If you set the image to absolute as well, the Box can collapse because nothing in the flow is left to stretch it.

Keep the words above the photo

Static elements stack lower than elements set to relative, absolute, fixed, or sticky. An absolute heading therefore paints above a static image without a custom number. You need a number when another positioned element covers the words.

Z-index is available once position is not static. A higher value stacks above a lower value. The position article also says a child cannot climb above an element that already sits above its parent: if the whole hero is under the navbar, no number on the heading escapes the hero. The z-index guide is the page for that stack. This page is only how the heading gets onto the photo.

If the photo is busy and the heading is hard to read, set a background color on the heading's Box. That color is ordinary styling. It is not a separate overlay element. Read the words on the canvas. Then switch to the mobile portrait breakpoint, because a crop that felt fine on desktop can put the heading on the brightest part of the photo.

A background image on the Box is a different setup. The background image guide covers cover, contain, and position for that kind of photo. You can still absolutely position text inside a relative Box that uses a background image. Give that Box its own height or padding, because a background image does not supply height the way an image element does.

Check fixed and sticky before you reuse them

Fixed positions against the viewport and stays put while the page scrolls. That is a different job from a caption on one photo. Sticky switches between relative and fixed inside its parent, and it needs at least one of top, bottom, left, or right. Sticky can fail when a parent has a set height or overflow set to hidden, scroll, or auto. Leave the hero heading on absolute unless you have a reason for it to chase the scroll.

The position article also notes that some browsers do not support sticky. Do not use sticky as the overlay method and then discover the heading has returned to the flow in a browser you did not check.

Publish and read the hero

Publish the page and open the hero on the live site. The heading should sit on the photo, inside the Box, and the next section should start where it did before the overlay. Scroll the page. An absolute heading scrolls away with the hero. A fixed heading stays on the screen. If you wanted the first and got the second, set the heading back to absolute.

Click the heading if it is also a link, and confirm the click lands on the heading rather than passing through to a link on the image. If the relativity indicator was correct in the Designer and the live heading is still at the page corner, the published parent is not the relative Box. Select the heading in the Navigator and check that it is inside that Box.

Overlaying a heading on a photo you already use is ordinary layout work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.