You can set Image as text background of any HTML element using CSS background-clip property, background-clip limits the background image to the content of element.
Table of Contents
background-clip
background-clip property specifies the limit of background of any html element, The default value of background-clip is border-box.
Syntax
div {
background-color: blue;
background-clip: padding-box;
}
HTML Code
The HTML code is given below, The image background is set for h1 element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image as Text Background</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>How To Code School</h1>
</body>
</html>
CSS Code
Using CSS the element is aligned in center both vertically and horizontally, then the image (bg.jpg) is set as background of h1 element and it is clipped to limit the image to the content, i.e text inside h1 element.
Color of text is set to transparent to make the background image visible.
body
{
padding: 0;
margin: 0;
font-family: fantasy;
font-size: 74px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
text-transform: uppercase;
}
h1
{
background-image: url(bg.jpg);
background-clip: text;
-webkit-background-clip:text;
color: transparent;
}