• Post category:CSS

How to Create Image Text in CSS | Step by Step Guide

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:

image text css

  1. In the above code, we have created a “<h2>” tag with some text inside the <body>.
  2. Then select <h2> tag in CSS and add an image using the “background” property.
  3. To cover the background image, we should set the “background-size” property to “cover”.
  4. Then we should use “-webkit-background-clip” property and give the value as “text’ as in the above code.
  5. We must should use the “color” property and give value as “transparent”.
    See the result, the merged image text is displayed.

Leave a Reply