In this article, we will set the image in the text background using HTML and CSS. let’s see what CSS property is used for it.
HTML Code: First, We will write HTML code to create a basic structure of the body. In the following code, we will use heading tag to write one line content.
<!DOCTYPE html>
<html>
<head>
<title>How to add the image in text background using CSS?</title>
</head>
<body>
<h1>THECODEHUBS</h1>
</body>
</html>
CSS Code: Let’s see what the CSS property is used to set the image as background in the text. we can use the background-image property to set an image as background, the -webkit-text-fill-color property to give the text a transparent color, the background image will show through the text, thus completing the clipping effect.
<style>
h1 {
background-image: url(http://staging.thecodehubs.com/wp-content/uploads/2022/02/how-to-add-image-in-text-background-in-html-using-css-1.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 200px;
font-size: 120px;
text-align: center;
text-transform: uppercase;
font-family: sans-serif;
font-weight: 800;
-webkit-font-smoothing: antialiased;
}
</style>
Complete Code: In this section, we will combine the above codes for the demo.
<!DOCTYPE html>
<html>
<head>
<title>How to add the image in text background using CSS?</title>
<style>
h1 {
background-image: url(http://staging.thecodehubs.com/wp-content/uploads/2022/02/how-to-add-image-in-text-background-in-html-using-css-1.jpg);
background-repeat: no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 200px;
font-size: 120px;
text-align: center;
text-transform: uppercase;
font-family: sans-serif;
font-weight: 800;
-webkit-font-smoothing: antialiased;
background-size: cover;
background-position: center center;
}
</style>
</head>
<body>
<h1>THECODEHUBS</h1>
</body>
</html>
Output:
