How TO - Position Text Over an Image
Learn how to place text over an image.
Image Text
Bottom Left
Top Left
Top Right
Bottom Right
Centered
How To Place Text in Image
Step 1) Add HTML:
Example
<div>
<img src="img_snow_wide.jpg" alt="Snow" >
<div>Bottom Left</div>
<div>Top Left</div>
<div>Top Right</div>
<div>Bottom Right</div>
<div>Centered</div>
</div>
<img src="img_snow_wide.jpg" alt="Snow" >
<div>Bottom Left</div>
<div>Top Left</div>
<div>Top Right</div>
<div>Bottom Right</div>
<div>Centered</div>
</div>
Step 2) Add CSS:
Example
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Top left text */
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Try it Yourself ».container {
position: relative;
text-align: center;
color: white;
}
/* Bottom left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Top left text */
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
To learn more about how to style images, read ourCSS Images tutorial.
To learn more about CSS positoning, read ourCSS Position tutorial.
