How to add Image in Text Background using CSS?
1 min readJan 9, 2023
Hey, how are you?
This is my third blog & it’s going amazing! Today we will make a text that contains an image as it’s background. Like this,
But, why to make a text like this?
Well, because it looks cool and beautiful!
Let’s get started!
- 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>2. Style the text with CSS:
p {
background-image: url(image url); /* Put any image that looks beautiful */
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Text styling for example */
font-size: 8rem;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-family: Sans-Serif;
font-weight: 800;
}That’s it. I hope you have made it successfully!
Thanks for Reading, see you soon😊
Don’t forget to like and follow for more…
Instagram: @coding_dev_
