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.
Top comments (0)