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 top left position on an image with CSS
To position text to the top left position on an image, use the position property with absolute positioning along with the top and left properties. The parent container must have position: relative to serve as the positioning reference.
Syntax
.container {
position: relative;
}
.text-overlay {
position: absolute;
top: value;
left: value;
}
Example
The following example demonstrates how to position text at the top left corner of an image −
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 400px;
height: 250px;
opacity: 0.8;
border-radius: 8px;
}
.text-overlay {
position: absolute;
top: 15px;
left: 15px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 12px;
font-size: 14px;
border-radius: 4px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Image with Top Left Text Overlay</h2>
<div class="image-container">
<img src="/css/images/logo.png" alt="Sample Image">
<div class="text-overlay">Top Left Position</div>
</div>
</body>
</html>
An image appears with white text "Top Left Position" positioned at the top left corner. The text has a semi-transparent black background for better readability against the image.
Key Points
- The parent container must have
position: relative - The text element uses
position: absolutewithtopandleftvalues - Adding a background color to the text improves readability over images
- Use
display: inline-blockon the container to prevent it from taking full width
Conclusion
Positioning text on images is achieved using absolute positioning within a relative container. The top and left properties control the exact placement, while background styling enhances text visibility.
Updated on: 2026-03-15T13:09:47+05:30
1K+ Views
Advertisements