1. Home

How To Add Text Blocks Over an Image

Learn how to place text blocks over an image

Image Text Blocks

Norway

Nature

What a beautiful sunrise

Nature

What a beautiful sunrise

Try it Yourself »

How To Place Text Blocks in Image

Step 1) Add HTML:

Example

<div class="container">
  <img src="nature.jpg" alt="Norway" style="width:100%;">
  <div class="text-block">
    <h4>Nature</h4>
    <p>What a beautiful sunrise</p>
  </div>
</div>

Step 2) Add CSS:

Example

/* Container holding the image and the text */
.container {
  position: relative;
}

/* Bottom right text */
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}
Try it Yourself »

To learn more about how to style images, read our CSS Images tutorial.

To learn more about CSS positoning, read our CSS Position tutorial.

Categories

HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

Contact US