Adding a background image to a text.

Adding a background image to a text.

Table of contents

No heading

No headings in the article.

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

Our Result

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:

BG image

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

Final Result

###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.