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 left on an image with CSS
To position text at the bottom left of an image with CSS, you need to use absolute positioning within a relative container. The position: absolute property combined with bottom and left properties allows precise text placement over images.
Syntax
.container {
position: relative;
}
.text-overlay {
position: absolute;
bottom: value;
left: value;
}
Method 1: Basic Bottom Left Positioning
The following example positions text at the bottom left corner of an image −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
display: inline-block;
max-width: 400px;
}
.container img {
width: 100%;
height: auto;
display: block;
}
.bottom-left-text {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 16px;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.5);
padding: 8px 12px;
border-radius: 4px;
}
</style>
</head>
<body>
<h2>Image with Bottom Left Text</h2>
<div class="container">
<img src="/css/images/logo.png" alt="Sample Image">
<div class="bottom-left-text">Bottom Left Corner</div>
</div>
</body>
</html>
An image appears with white text "Bottom Left Corner" positioned at the bottom left corner, with a semi-transparent dark background for better readability.
Method 2: Multiple Text Elements
You can position multiple text elements at different bottom positions −
<!DOCTYPE html>
<html>
<head>
<style>
.image-wrapper {
position: relative;
display: inline-block;
max-width: 400px;
}
.image-wrapper img {
width: 100%;
height: auto;
display: block;
}
.text-overlay {
position: absolute;
color: white;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.7);
padding: 6px 10px;
border-radius: 3px;
}
.caption {
bottom: 10px;
left: 10px;
font-size: 14px;
}
.subtitle {
bottom: 40px;
left: 10px;
font-size: 12px;
}
</style>
</head>
<body>
<h2>Multiple Text Overlays</h2>
<div class="image-wrapper">
<img src="/css/images/logo.png" alt="Demo Image">
<div class="text-overlay caption">Main Caption</div>
<div class="text-overlay subtitle">Subtitle Text</div>
</div>
</body>
</html>
An image displays with two text overlays positioned at the bottom left: "Subtitle Text" higher up and "Main Caption" at the very bottom, both with dark semi-transparent backgrounds.
Key Points
- The container must have
position: relative - The text overlay needs
position: absolute - Use
bottomandleftproperties for positioning - Add background colors for better text readability
Conclusion
Positioning text at the bottom left of images requires absolute positioning within a relative container. Use bottom and left properties with appropriate values to achieve precise text placement over images.
Updated on: 2026-03-15T13:03:46+05:30
2K+ Views
Advertisements