DEV Community

Cover image for Adding a background image to a text.
Stephen
Stephen

Posted on

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

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)