How To Put Text Over An Image In Webflow
Here are two ways you can have Text over an Image in Webflow:
Using Backgrounds:
- From inside your Webflow Designer, select the area which contains your text.
- Locate the Backgrounds section from the right sidebar menu and click to expand.
- Click the image to change or add as a background.
- Click on Choose image.
- Select an image of your choice.
- Adjust position and size.
- You now have an image as a background to your text.
Using Positioning:
- Locate the images you wish to modify to have text over.
- Go to the Add Elements section from the left sidebar menu.
- Use a Div or Container block as a wrapper on your image.
- Once added, go to the Navigator panel from the left sidebar menu.
- Ensure your wrapper contains the image inside it.
- If not, simply drag and adjust it to be so.
- You can now add a text element inside your wrapper.
- Again, ensure they are both contained inside the wrapper. Then, select your wrapper element.
- Locate the Position section from the left sidebar menu.
- Set it to be Relative.
- Then, select the text block.
- Locate the Position section again.
- And set this to be Absolute.
- At this step, you may consider adjusting the Z level of your text to appear correctly.
- Now, select your wrapper element again.
- Locate the Display settings in the Layout section in the right sidebar menu. Set this to Flex.
- Use the Align option to center or adjust your text.
- You now have text on top of your image.
This website uses cookies to ensure you get the best experience on our website. Learn More
Got it