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 right position on an image with CSS
To position text to the top right corner of an image, you need to use CSS positioning properties. This involves making the container element relatively positioned and the text absolutely positioned with top and right properties.
Syntax
.container {
position: relative;
}
.text-overlay {
position: absolute;
top: value;
right: value;
}
Example
The following example demonstrates how to position text in the top right corner of an image −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
display: inline-block;
}
.container img {
width: 300px;
height: 200px;
display: block;
border: 2px solid #ddd;
}
.top-right-text {
position: absolute;
top: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 10px;
font-size: 14px;
border-radius: 3px;
}
</style>
</head>
<body>
<h2>Image with Top Right Text</h2>
<div class="container">
<img src="/css/images/logo.png" alt="Sample Image">
<div class="top-right-text">Top Right</div>
</div>
</body>
</html>
An image with a dark semi-transparent text overlay positioned in the top right corner displaying "Top Right" in white text.
Key Points
- The container must have
position: relativeto establish a positioning context - The text overlay uses
position: absolutewithtopandrightproperties - Adding a semi-transparent background improves text readability
- Use
display: inline-blockon the container to prevent it from taking full width
Conclusion
Positioning text on images is achieved through CSS positioning. The key is using relative positioning on the container and absolute positioning on the text element with appropriate top and right values.
Updated on: 2026-03-15T12:53:02+05:30
1K+ Views
Advertisements