How To Put Text Over An Image In Webflow

Quick summary

In Webflow Designer, you can place text over an image using two methods: setting the image as a background to a text element, or using CSS positioning (Relative on the wrapper, Absolute on the text block) inside a Div wrapper.

Steps

1. Select the text area in your Webflow Designer that you want to place over an image.
2. Open the Backgrounds section from the right sidebar menu by clicking to expand it.
3. Click the image option to add or change the background image for that element.
4. Click Choose image to open the image picker.
5. Select an image of your choice from the asset library.
6. Adjust the image position and size to fit your layout.
7. Confirm the result — you now have an image as a background behind your text.
8. Alternatively, locate the images you wish to modify to have text overlaid on top.
9. Go to the Add Elements section from the left sidebar menu.
10. Add a Div or Container block as a wrapper around your image.
11. Open the Navigator panel from the left sidebar to review the element structure.
12. Ensure your wrapper contains the image inside it.
13. If not, drag and adjust the image inside the wrapper element.
14. Add a text element inside the same wrapper.
15. Confirm both the image and text are contained inside the wrapper, then select the wrapper element.
16. Locate the Position section from the right sidebar menu.
17. Set the wrapper position to Relative.
18. Select the text block inside the wrapper.
19. Locate the Position section again in the right sidebar.
20. Set the text block position to Absolute.
21. Adjust the Z level of your text element if needed so it appears correctly on top of the image.
22. Select your wrapper element again to adjust layout settings.
23. In the Layout section, set Display to Flex.
24. Use the Align option to center or reposition your text over the image.
25. Your text is now layered on top of your image in Webflow.