How To Put Text Over An Image In Webflow

‍

Here are two ways you can have Text over an Image in Webflow:

‍

Using Backgrounds:

1. From inside your Webflow Designer, select the area which contains your text.
2. Locate the Backgrounds section from the right sidebar menu and click to expand.
3. Click the image to change or add as a background.
4. Click on Choose image.
5. Select an image of your choice.
6. Adjust position and size.
7. You now have an image as a background to your text.

Using Positioning:

1. Locate the images you wish to modify to have text over.
2. Go to the Add Elements section from the left sidebar menu.
3. Use a Div or Container block as a wrapper on your image.
4. Once added, go to the Navigator panel from the left sidebar menu.
5. Ensure your wrapper contains the image inside it.
6. If not, simply drag and adjust it to be so.
7. You can now add a text element inside your wrapper.
8. Again, ensure they are both contained inside the wrapper. Then, select your wrapper element.
9. Locate the Position section from the left sidebar menu.
10. Set it to be Relative.
11. Then, select the text block.
12. Locate the Position section again.
13. And set this to be Absolute.
14. At this step, you may consider adjusting the Z level of your text to appear correctly.
15. Now, select your wrapper element again.
16. Locate the Display settings in the Layout section in the right sidebar menu. Set this to Flex.
17. Use the Align option to center or adjust your text.
18. You now have text on top of your image.