How to Add Image in Text Background using HTML and CSS ?
Last Updated :
04 Jun, 2024
In this article, we will use HTML and CSS to set the image in the text background. To set the image in the text background, some CSS property is used. To add an image in the text background using HTML and CSS, create a container element (e.g., a `<div>`), set its background to the desired image using CSS ('background-image property), and adjust the text properties (e.g., color, size) to ensure readability.
Use CSS positioning and z-index to layer the text over the image. Additionally, you can use 'background-size' and 'background-position' properties to control the image's appearance within the container.
Example 1:
html
<!DOCTYPE html>
<html>
<head>
<title>
How to Add Image in Text Background
using HTML and CSS ?
</title>
<style>
p {
background-color: #2f8d46;
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20231218222854/1.png");
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 200px;
font-size: 120px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-family: 'Steelfish Rg', 'helvetica neue',
helvetica, arial, sans-serif;
font-weight: 800;
-webkit-font-smoothing: antialiased;
}
</style>
</head>
<body>
<p>GeeksforGeeks</p>
</body>
</html>
Output:
OutputExample 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to Add Image in Text Background
using HTML and CSS ?
</title>
<style>
body {
margin: 0;
padding: 0;
text-align: center;
}
h1 {
display: inline-block;
margin: 0;
font-size: 400px;
background-color: #2f8d46;
background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20231218224644/w.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Output:
