In this example, we will learn how to position text over an image using CSS. We have already seen how to display text over an image. Here, we will be positioning the text at the top-left corner, top-right corner, bottom-right corner, bottom-left corner, and the center.
position
propertyobject-fit
propertytop
propertyleft
propertyright
propertybottom
propertyHTML
<div class="image-container">
<img src="<https://thumbs.dreamstime.com/b/cosmos-beauty-deep-space-elements-image-furnished-nasa-science-fiction-art-102581846.jpg>" />
</div>
<span class="bottom-left">Hello from bottom left</span>
<span class="top-left">Hello from top left</span>
<span class="top-right">Hello from top right</span>
<span class="bottom-right">Hello from bottom right</span>
<span class="centered">Hello from centered</span>
CSS
.image-container {
position: relative;
}
img {
height: 100vh;
width: 100%;
}
span{
background-color: white;
color: black;
}
.bottom-left {
position: absolute;
bottom: 0px;
left: 0px;
}
.top-left {
position: absolute;
top: 0px;
left: 0px;
}
.top-right {
position: absolute;
top: 0px;
right: 0px;
}
.bottom-right {
position: absolute;
bottom: 0px;
right: 0px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
}
Output
Here, we positioned the texts relative to the viewport using position: absolute
and positioned the texts in every corner and the center using left
, right
, top
, and bottom
properties.
In this example, we learned how to position text over an image using CSS. We used the position
property to position the text over an image and left
, right
, top
, and bottom
properties to position it in different corners and at the center.