Text Overlay on an Image Using HTML & CSS

Do you know how to fill an image with text and make it a little blur using HTML and CSS (Text Overlay on an Image)?

Today we'll learn how to make a text overlay on an image using HTML and CSS.

Prerequisites:-

1. An Image over which you want to fill text.
2. A code editor like Visual Studio Code.

---

Following is the demo of what we are going to make today -

You can see here this image of the girl is filled with text and the image is hidden and blurry with the huge amount of text. We'll make this using HTML and CSS and also make it responsive.

---

Let's start with the HTML file.

The long paragraph text you're seeing in the code inside the p tag is generated using lorem.

What is Lorem?

Lorem is a random text generator used in HTML files to generate random words. For reference, you can visit it's official website here.

I have used here lorem1200 which will randomly generate 1200 words(dummy text).

---

If you're using Visual Studio Code, you can install an extension called Live Preview which will help you to see the output beside your code files in the code editor itself.

---

Now we will code the CSS file

Here I have imported a font called Poppins from the Google Fonts.

I've used the -webkit-background-clip property here and given it as text which is the class given to the paragraph tag. This will make the text float over the image. I've kept the background attachment fixed which will keep the image used here in the background as fixed with regards to the viewport and stopped the background image from repeating itself using background repeat as no repeat.

---

So, now we're done with our coding. So, let's see the output.

Output

Now, if you run this code, you'll also find it as a responsive webpage.

---

You can also watch this video for clarity.

Hope this helps you. Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my YouTube Channel and connect on LinkedIn or Twitter. 😊