How to create image text block with CSS?
The websites these days popularly contain some text blocks on the image for various uses like adding text relevant to the image or advertising about any product.
In this tutorial, we will be learning to create text blocks on images with CSS.
Creating image text block
Create a div container to wrap the image and the text block and add position: relative property to the container class and position: absolute property to the text block element to place text over the image. Other properties can be used to customize the text block.
Example: Creating a text block on the image with CSS
Here is an example of creating text blocks on images.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<style>
.container {
position: relative;
}
.text{
position: absolute;
top: 20px;
left: 20px;
right: 50px;
padding-left: 5px;
background-color: #cccccc;
}
img {
width: 100%;
height: 600px;
}
</style>
<body>
<div class="container">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627902885-101156.png" alt="">
<div class="text">
<h2> The text block </h2>
<p> Some text here </p>
</div>
</div>
</body>
</html>
Output
Here is the output of the above code.
Example: Creating a text block on an image
Here, we have added an image with background the property. And added a text block to the foreground.
Conclusion
In this tutorial, we have learned to create text block on image with CSS. We added a text block to the image using the position property or by simply adding an image to the background.
