Heapcoding

How to put text on an image using CSS and HTML

Published June 29, 2022

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.

How to put text on an image using CSS and HTML

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.

How to put text on an image using CSS and HTML

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.

How to put text on an image using CSS and HTML

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.

How to put text on an image using CSS and HTML

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.

How to put text on an image using CSS and HTML

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.