The text or data container helps display information on the image using CSS. CSS styles and adjusts images and information on the page. We can use images in multiple ways to display and contain text. Here, we can use two methods to display text on the image using CSS.
- Style image and text tag using CSS.
- Add a background image on the container.
Style Image and Text Tags Using CSS
The image and text tags are positioned within HTML elements. CSS properties are applied to customize the display of images based on user preferences. Text tags can also be modified using CSS attributes like positioning, padding, margin, and more.
Syntax
The subsequent syntax displays the properties of the text and image container style.
<style>
.text-block {
position: absolute|relative;
bottom: 0%|0px;
right: 0%|0px;
color: color_value;
padding: 0%|0px;
}
</style>
Description
- The position can be set with absolute or relative values.
- The bottom, right, top, and left properties with values required for the text container.
- The 0%|0px values are set with required values such as 10% or 100px.
- We can set the color of the text as per requirement, but it is optional.
- The padding can be set with padding-left, right, top, or bottom with the pixel or percentage value.
Examples
The upcoming illustration displays various image dimensions paired with text or information. It is possible to style using CSS attributes and HTML components.
Example 1:
The provided illustration demonstrates the textual content alongside crucial components. It allows for the placement of data within the image.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Text On Image Using CSS </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 65%;
right: 5%;
color: yellow;
padding-left: 10px;
padding-right: 10px;
}
body{
background-color:beige;
}
</style>
</head>
<body>
<h2> Text On Image Using CSS </h2>
<p> Display information on the image: </p>
<div class = "container">
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Nature" style="width:100%;">
<!-- Add a container with the CSS properties like padding and margin with the value. -->
<div class = "text-block">
<h4> Nature Image </h4>
<b> Waterfall with the green nature </b>
<p> We can set the image and information using CSS </p>
</div>
</div>
</body>
</html>
Output:
The result showcases text overlaid on the webpage image.
Example 2:
The provided illustration demonstrates the text visible within the image along with the necessary components. One can generate a data block and exhibit it on the right-hand side of the image.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Text On Image Using CSS </title>
<style>
/*This CSS property styles the relative position of the container*/
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 50%;
right: 5%;
background-color: lightgrey;
color: black;
padding-left: 10px;
padding-right: 10px;
width: 150px;
}
body{
background-color:beige;
}
</style>
</head>
<body>
<h2> Text On Image Using CSS </h2>
<p> Display information on the image: </p>
<div class = "container">
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Nature" style="width:100%;">
<!-- Add CSS properties like padding and margin with the value. -->
<div class = "text-block">
<h4> Nature Image </h4>
<b> Waterfall with the green nature </b>
<p> We can set the image and information using CSS </p>
</div>
</div>
</body>
</html>
Output:
The result showcases text overlaid on the webpage image.
Example 3:
The subsequent illustration demonstrates the textual content within the image containing key components. It is possible to adjust the placement of the data depicted in the image. By generating two data segments, we can exhibit them on both the left and right sides of the image.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Text On Image Using CSS </title>
<style>
body{
background-color:beige;
}
/*This CSS property styles the relative position of the container*/
.container {
position: absolute;
font-family: Arial;
width: 430px;
height: 450px;
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 55%;
right: 5%;
background-color: lightgrey;
color: black;
padding-left: 10px;
padding-right: 10px;
width: 150px;
}
/* Add a child element of the text container with different CSS properties */
.text-block p {
position: absolute;
bottom: 55%;
right: 130%;
color: yellow;
padding-left: 10px;
padding-right: 10px;
width: 150px;
}
</style>
</head>
<body>
<h2> Text On Image Using CSS </h2>
<p> Display information on the image: </p>
<div class = "container">
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Nature" style="width:100%;">
<!-- Add a container with the CSS properties like padding and margin with the value. -->
<div class = "text-block">
<h4> Nature Image </h4>
<b> Waterfall with the green nature </b>
<p> We can set the image and information using CSS </p>
</div>
</div>
</body>
</html>
Output:
The result showcases text overlaid on the webpage image.
Add a Background Image on the Container
The backdrop picture is configured on the necessary container, while the content label is positioned on HTML components. The CSS attribute is employed to exhibit images based on user preferences with specified dimensions. The content labels can adapt utilizing the CSS style attributes such as padding, margin, width, and other selectable properties.
Syntax
The subsequent syntax demonstrates the properties of styling text and image containers.
<style>
.container {
position: absolute;
background-image: url("image_path/image_name.extension");
}
.text-block {
position: absolute|relative;
bottom: 0%|0px;
right: 0%|0px;
color: color_value;
padding: 0%|0px;
}
</style>
Description
- The position can be set with the absolute for the background image, or the text tag can be absolute or relative.
- The image height and width are optional but enhance the container's style.
- The bottom, right, top, and left properties with values necessary to display text.
- The 0%|0px values are set with required values such as 10% or 100px.
- We can set the color or background color for the text tag as required, but it is optional.
- The padding can be set with the pixel or percentage value.
Examples
The subsequent illustration displays various image dimensions accompanied by text or data. It is achievable through the utilization of CSS attributes and HTML components.
Example 1:
The provided illustration demonstrates text overlay on an image containing fundamental details. It is possible to designate the image as the backdrop and showcase data on top of it. Adjustments can be made to the padding and margin of the container holding the information.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Text On Image Using CSS </title>
<style>
body{
background-color:beige;
}
/*This CSS property styles the relative position of the container*/
.container {
position: absolute;
font-family: Arial;
width: 430px;
height: 350px;
background-image: url("https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f");
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 55%;
right: 15%;
background-color: lightgrey;
color: black;
padding-left: 10px;
padding-right: 10px;
width: 250px;
}
</style>
</head>
<body>
<h2> Text On Image Using CSS </h2>
<p> Display information on the image: </p>
<!-- Add an image on the container as a background image -->
<div class = "container">
<div class = "text-block">
<h4> Nature Image </h4>
<b> Waterfall with the green nature </b>
<p> We can set the image and information using CSS </p>
</div>
</div>
</body>
</html>
Output:
The result showcases text overlaid on the webpage image.
Example 2:
The upcoming example demonstrates the main and block text displayed over an image. The image can be designated as the background for all HTML elements, allowing content to be presented on top of the image. It is also possible to define the width, height, and padding of both the image and the information container.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Text On Image Using CSS </title>
<style>
body{
background-color:beige;
}
/*This CSS property styles the relative position of the container*/
.container {
position: absolute;
font-family: Arial;
width: 430px;
height: 350px;
background-image: url("https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f");
}
/*This CSS property styles the information on the image*/
.text-block {
position: absolute;
bottom: 25%;
right: 15%;
background: rgba(176, 75, 76, 0.3);
color: yellow;
padding-left: 10px;
padding-right: 10px;
width: 250px;
}
</style>
</head>
<body>
<!-- Add an image on the container as a background image -->
<div class = "container">
<h2> Text On Image Using CSS </h2>
<p> Display information on the image: </p>
<div class = "text-block">
<h4> Nature Image </h4>
<b> Waterfall with the green nature </b>
<p> We can set the image and information using CSS </p>
</div>
</div>
</body>
</html>
Output:
The result showcases text overlaid on the webpage's image.
Conclusion
The image can be configured using the elements' value, text, and title attributes. Various CSS properties can be applied to overlay text onto images. Incorporating text on the image enhances user comprehension of contact details.