How to use absolute position In CSS
In this approach, we are using the absolute position property. Here we create a container and set the container position to relative, this makes the container the reference point for the positioned text. Then we use position: absolute; on the text element, this allows us to place the text precisely within the container using top, bottom, left, and right properties.
Example: In this example, we are using the absolute position property to place text over an image using CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 400px;
height: 300px;
}
.image {
width: 100%;
height: 100%;
object-fit: fill;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="container">
<img class="image" src=
"https://media.w3wiki.org/wp-content/uploads/20240330112115/gfg-gg-logo-100.jpg"
alt="Image">
<div class="text">w3wiki</div>
</div>
</body>
</html>
Output:
Text over an image using the absolute position property
How to Place Text Over an Image using CSS?
Placing text over an image is a common design technique used to create visually appealing layouts. It is often used in websites and applications to add context or highlight important information.
Below are the approaches to placing text over an image using CSS:
Table of Content
- Using absolute position
- Using background-image