How can I overlay text on an image within a section in Webflow?
TL;DR
- Add a Section with a Div Block containing an Image and another Div for text overlay.
- Set the wrapper Div to Relative positioning and the text overlay Div to Absolute, then style for layout and readability.
To overlay text on an image in a section in Webflow, you’ll need to use positioning styles for layout control. Here’s how to set it up properly.
1. Add a Section and Place an Image
- Drag in a Section from the Add elements panel.
- Inside the Section, add a Div Block (this will be your wrapper).
- Inside the Div Block, add an Image element and upload your desired image.
2. Create a Text Overlay Container
- Add another Div Block inside the wrapper—this will hold your text overlay.
- Drag a Text Block or Heading element into the new Div for your overlay text.
3. Apply Positioning Styles
- Set the wrapper Div Block (the parent of the image and overlay) to Position: Relative.
- Select the overlay Div Block (the one containing your text) and set it to:
- Position: Absolute
- Full width and height (Top: 0, Left: 0, Right: 0, Bottom: 0) or position it manually using top/left/right/bottom values.
- Style the overlay (e.g., apply a semi-transparent background, align text with Flexbox or padding as needed).
4. Optional: Enhance Text Visibility
- To improve readability:
- Add a background color (like black with 50% opacity) to the overlay Div.
- Or apply a gradient over the image.
- Use text shadows or white text on dark overlays for contrast.
Summary
Use a relatively-positioned wrapper with an absolutely-positioned text overlay inside to manually layer text on top of an image. This gives full control over layout and design responsiveness.