Adding a background image to a text.

In this tutorial, we'll see how to add a background image to a text and this can be any image of your choice.

I already posted a complete video tutorial on my YouTube channel, and you can watch it there.

Now, let's get right into it!

We'll deal with only 2 files here ; index.html and styles.css.

The HTML SETUP We'll add our standard HTML boilerplate and link the external stylesheet(styles.css)

Now we're going to add an h1 tag to the body of our HTML

And that's that for our HTML

Adding Styles to our HTML The first thing we want to do is to increase the font size a bit,I'll set it to a 100px

Then we'll add a background image from the Pexels Website

Now we'll have an interface like this:

But we rather want the image in the background of the text and not in this way, this is how to implement that

Finally, we should get the result we expected when we preview int the browser

Thanks for reading to the end! You can watch the video version of this tutorial here. Consider giving me a follow on my Twitter if you liked this article.