Table of contents
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
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.