Image Text CSS
In this article, we will see how to create image text in CSS. To merge images and text, we can use the CSS “-WebKit-background-clip” property.
<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
h2{
background: url(./sas.jpg);
font-size: 14vw;
font-family: cursive;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
</style>
<body>
<h2>IMAGE TEXT</h2>
</body>
</html>Output:
- In the above code, we have created a “<h2>” tag with some text inside the <body>.
- Then select <h2> tag in CSS and add an image using the “background” property.
- To cover the background image, we should set the “background-size” property to “cover”.
- Then we should use “-webkit-background-clip” property and give the value as “text’ as in the above code.
- We must should use the “color” property and give value as “transparent”.
See the result, the merged image text is displayed.
