How to create: text blocks on images

Previous Page Image Text
Next Page Transparent Image Text

Learn how to place text blocks on images.

Image text block

Wuhan

What a great city! I love it!

Try it yourself

How to place text blocks in images

Step 1 - Add HTML:

<div class="container">
  <img src="nature.jpg" alt="Norway" style="width:100%;">
  <div class="text-block">
    <h4>Wuhan</h4>
    <p>What a great city! I love it!</p>
  </div>
</div>

Step 2 - Add CSS:

/* Container for images and text */
.container {
  position: relative;
}
/* Text at the bottom right */
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

Try it yourself

Tutorial:CSS Image

Tutorial:CSS Positioning