How can I add text on an image in Webflow?

To add text over an image in Webflow, you need to position the text and the image using a container with relative and absolute positioning.

1. Create a Parent Container

• Drag a Div Block into your canvas.
• Set its position to Relative in the Style panel.
• This will serve as the wrapper for both the image and the text.

2. Add the Image

• Place an Image element inside the Div Block.
• Upload or choose your image from the Assets panel.
• Ensure the image is styled to fit the container as needed (e.g., width: 100%).

3. Add the Text Element

• Drag a Text Block or Heading into the same Div Block (outside the Image element but still within the parent container).
• Set its position to Absolute in the Style panel (e.g., top left or center).
• Use the horizontal and vertical position controls to place the text exactly where you want it over the image.

4. Style the Text

• Adjust font size, color, and weight to make the text readable over the image.
• Consider adding a semi-transparent background or text shadow for better visibility.

5. Make It Responsive

• On different device breakpoints, reposition or resize the text as needed to maintain legibility and alignment over the image.

Summary

To add text on an image in Webflow, place both elements in a Relative-positioned Div, set the text to Absolute, and style it to overlay properly. This ensures the text appears exactly where you want over the image and remains responsive across breakpoints.