How to place text over an image

How to place text over an image

Today we will learn one the most useful css tricks, how to place text over an image.

 

Final result:

Let's begin:

Step 1) Add HTML:

<div class="container">
  <imgsrc="img_snow_wide.jpg"alt="Snow"style="width:100%;">
  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>
  <divclass="centered">Centered</div>
</div>

 

Step 2 ) Add CSS

/* 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%);
}

 

That's it. Now you have five texts over your image in five different positions. Use each one as you please in your next project.

Share:

Enjoy this?

Subscribe our newsletter and get latest updates straight to your inbox.