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!

The interface we'll be expecting

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)

<!DOCTYPE html>
<head>
    <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body> </body>
</html>

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

<!DOCTYPE html>
<head>
    <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body> 
 <h1>Hello World!</h1>
</body>
</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

h1{
   font-size:100px;
  }

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

h1{
  ...
 background:url(https://images.pexels.com/photos/7422479/pexels-photo-7422479.jpeg?cs=srgb&dl=pexels-nothing-ahead-7422479.jpg&fm=jpg)

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

h1{
  ...
  background-size: contain;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

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

Conclusion

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.

Blog

Adding a background image to a text.

Stephen

Conclusion

Join Our Newsletter. No Spam, Only the good stuff.

Related