How to use CSS background-image to place text on the image In HTML
Use CSS background-image property to set an image as background within a container. Adjust background size using background-size property to cover the entire container. Overlay text elements on the background for a visually appealing design.
Example: In this example, we are using CSS background-image property to place text on the image.
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
.container {
position: relative;
width: 400px;
height: 300px;
background-image: url(
"https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png");
background-size: cover;
background-size: 100% 100%;
color: white;
text-align: center;
line-height: 300px;
}
.text {
background-color: rgba(0, 0, 0, 0.5);
font-size: 20px;
font-weight: bold;
padding: 10px;
}
</style>
</head>
<body>
<center>
<div class="container">
<div class="text">Text on Image : (w3wiki)</div>
</div>
</center>
</body>
</html>
Output:
Using CSS background-image Property
Explanation:
- The above example overlays text on an image using the background-image property.
- Container div styled with specific dimensions and background image URL.
- Text positioned inside div with semi-transparent background for visibility.
- Overall effect achieved through precise styling and positioning.
Conclusion:
Adding text over an image is widely used in web development. We can see this being used in customer testimonial sections. We also add text on images to create more interactive elements, add watermarks, or establish copyright ownership.
This article teaches two easy ways to overlay text on image. Use the power of HTML and CSS to create interactive images,
How to place text on image using HTML and CSS?
Adding text over images is a very common task in web development and developers have been doing it for a long time. Instead of using image editing software, we can add text to an image using HTML and CSS.
Adding text to an image serves various benefits like providing better SEO, clarity, and emphasis on the image, and also provides a way for screen readers to read the text.
In this article, we will learn two methods to add a Text Block over an image using HTML and CSS. The two ways are:
Table of Content
- Using Absolute Positioning to place text on an image
- Using CSS background-image to place text on the image