In this tutorial I shall show you how to put text on an image using CSS and HTML. Without wasting your time, start the tutorial.
Step 1 – Add an image in the html document.
First of all let’s add an image in our html document.
In the above image you can see I have added an image to our document.
Now let’s render it in the web browser to see the changes.
In the above screenshot you will see that our image is successfully rendered in the web browser. Now let’s add text in our document.
Step 2 – Add text in HTML document
Let’s add text in the HTML page.
In the above screenshot you can see I have added the text into our webpage. Now let’s render this webpage and see how this text looks in the web browser.
In the above screenshot you can see the text and the image are appearing in our web browser. Now let’s put text on the image using CSS.
In the above screenshot you can see I have added position “absolute” to the image with top “0” and left “0” and z-index is “0”.
Then I have added some css properties to the paragraph to appear above the image.
Now take a look in the web browser to see the results of the code.
In the above image you can see our text is appearing on the image. And the image is on the back of the text.
Congratulations you have learned how to put text on an image using CSS and HTML.