How can I add text on an image in Webflow?

To add text on an image in Webflow, you need to properly position a text element over an image using layout and styling settings.

​

1. Add an Image and Text Element  

• Drag an Image element into your desired section or container.
• Upload or choose your image.
• Place a Div Block in the same section to hold your text.
• Drag a Text Block or Heading into the Div Block.

​

2. Use Relative and Absolute Positioning  

• Select the parent container or Div Block that holds both the image and text.
• In the Style panel, set its Position to Relative.
• Select the Text Block’s parent Div Block and set its Position to Absolute.
• Adjust the positioning (top, bottom, left, right) values to place the text where you want it on the image.

3. Style the Text Overlay  

• Use padding, font size, font color, and background color or gradient (with transparency) to increase visibility.
• You can also add opacity, text shadow, or box shadow for better contrast.

​

4. Make It Responsive  

• Use the Responsive tabs (Desktop, Tablet, Mobile) to adjust position and size of the text for different devices.
• Consider using Flexbox or Grid for more control if placing multiple items over the image.

​

5. Optional: Use a Background Image Instead  

• Instead of using an Image element, you can:
• Add a Div Block, set its Background Image under the Style panel.
• Add a Text Block inside this Div.
• Use Flexbox or Absolute positioning to control the layout.

​

Summary  

To place text over an image in Webflow, use a Relative-positioned container with an Absolutely-positioned text block, then adjust layout and styling for visual clarity and responsiveness.