DEV Community

Cover image for Add a Image in Text Background using css!
Tilak Jain
Tilak Jain

Posted on

Add a Image in Text Background using css!

So, Everyone likes cool and beautiful looking texts. There are many properties in text to style like shadow, stroke, color, etc!
Today, we are going to add an image in background of text.

Let's get started!

  1. Body of our code i.e. HTML:
<!DOCTYPE html>
<html>
<head>
<title>Text with Image as background</title>
</head>
<body>
<p>Good Morning</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  1. Style the text with CSS:
p {
background-image: url(image url);
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 8rem;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-family: Sans-Serif;
font-weight: 800;
}
Enter fullscreen mode Exit fullscreen mode

It's ready. It is very easy to make. I hope that you have successfully made it.

Thank you for reading!

Follow for more.

Discussion (0)