Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to position text to bottom right on an image with CSS
To position text at the bottom right of an image, use CSS positioning properties. The parent container needs position: relative while the text element uses position: absolute with bottom and right properties to achieve precise placement.
Syntax
.container {
position: relative;
}
.text-overlay {
position: absolute;
bottom: value;
right: value;
}
Example
The following example demonstrates how to position text at the bottom right corner of an image −
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
position: relative;
display: inline-block;
}
img {
width: 400px;
height: 250px;
opacity: 0.8;
border-radius: 8px;
}
.bottom-right-text {
position: absolute;
bottom: 15px;
right: 15px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Image with Bottom Right Text</h2>
<div class="image-container">
<img src="/css/images/white_flower.jpg" alt="Sample Image">
<div class="bottom-right-text">Bottom Right Corner</div>
</div>
</body>
</html>
An image with rounded corners appears with "Bottom Right Corner" text positioned at the bottom right, styled with a dark semi-transparent background for better readability.
Key Points
- The parent container must have
position: relativeto establish a positioning context - The text overlay uses
position: absolutewithbottomandrightproperties - Adding a semi-transparent background improves text readability over images
- Use
display: inline-blockon the container to prevent it from taking full width
Conclusion
Positioning text at the bottom right of an image is achieved using absolute positioning within a relative container. The bottom and right properties control the exact placement, while background styling ensures text visibility.
Updated on: 2026-03-15T13:05:35+05:30
1K+ Views
Advertisements