How to place text over an image?

To learn how to position text over an image with CSS follow the steps below:

Demo:

Step1.

Add HTML

Create the image container and add an image:

<div class="image-container">
  <img src="https://lenadesign.org/wp-content/uploads/2020/07/css-ice-cream.jpg" alt="ice-cream">
  <div class="left-b">Some Text...</div>
  <div class="left-t">Some Text...</div>
  <div class="right-t">Some Text...</div>
  <div class="right-b">Some Text...</div>
  <div class="center">Some Text...</div>
</div>

Step2.

Add CSS

Use CSS to position the text on an image (in the center, top right, top left, bottom right or bottom left):

.image-container {
  position: relative;
  text-align: center;
  color: #000;
  font-size:35px;
}

.left-b {
  position: absolute;
  bottom: 10px;
  left: 18px;
}

.left-t {
  position: absolute;
  top: 10px;
  left: 18px;
}

.right-t {
  position: absolute;
  top: 10px;
  right: 18px;
}

.right-b {
  position: absolute;
  bottom: 10px;
  right: 18px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Enjoy coding!

Share this: