How to Place Text Blocks Over an Image using CSS?
Placing text blocks over an image is a common technique used in web design to create visually appealing layouts. Here, we will explore different approaches to achieve this effect using CSS.
Below are the approaches to place text blocks over an image using CSS:
Table of Content
- Using Absolute Positioning
- Using CSS background-image
Using Absolute Positioning
In this approach, we are using absolute positioning which allows us to place an element precisely where we want inside another element. We first make the container element position relative to serve as a reference point. Then we use position absolute on the text element and adjust its top, bottom, left, or right values to position it over the image.
Example: The example below uses the absolute positioning property to place text blocks on the image using CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
position: relative;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
.text {
color: white;
text-align: center;
position: absolute;
top: 2%;
left: 2%;
right: 2%;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<img class="image"
src=
"https://media.w3wiki.net/wp-content/uploads/20240513173522/GfgImage.png"
alt="Image">
<div class="text">
Welcome to w3wiki!
</div>
</div>
</body>
</html>
Output:
Using CSS background-image
In this approach, we are using CSS background-image to place text blocks over an image. Here we set the image as the background of a container element. The text block is then placed inside the container.
Example: The example below uses CSS background-image property to place text blocks over an image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
.container {
position: relative;
width: 350px;
height: 300px;
background-image: url(
'https://media.w3wiki.net/wp-content/uploads/20240513173522/GfgImage.png');
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.text {
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<div class="text">
This is w3wiki logo
</div>
</div>
</body>
</html>
Output:
Output