How to place text over an image
Author
Author

Robert Nicjoo [68]

I love Laravel & WordPress, interested to pass little knowledge that I have to others.

Qr-Code

Scan to visit on mobile

TJD STUDIO is Hiring

Photographer & Videographer

Apply now Jabodetabek

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.

How do you like this article?

From Store

JobGard
JobGard
$ 2,000
TJD One
TJD One
$ 27
Back to top