4 Steps To Position Text Over Image In HTML CSS (Responsive)

Welcome to a quick tutorial on how to position text over an image in HTML and CSS. Are you trying to add some captions over an image in HTML? Only to find that there are no “out-of-the-box” HTML ways to do so?

An easy way to position a block of text over an image in HTML is to:

  1. Wrap the image in a figure caption – <figure class="txtover"> <img src="IMAGE.jpg"> <figcaption>CAPTION</figcaption> </figure>
  2. Position the caption text over the image – .txtover { position:relative } .txtover figcaption { position:absolute; bottom:0; left:0 }

But just how does this work exactly? Let us walk through some examples, and you will be able to customize it in any way you want – Read on for more!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Text Over Image Center Text
Useful Bits & Links Tutorial Video The End

 

DOWNLOAD & NOTES

First, here is the download link to the example source code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

TEXT OVER IMAGE WITH FIGURE CAPTION

All right, let us now get into the example of placing a block of text over an image in HTML and CSS.

 

TEXT OVER IMAGE DEMO

It’s just a sleepy boi.

 

STEP 1) ADD FIGURE CAPTION TO IMAGE

1-simple-text-over.html
<!-- (A) ATTACH CAPTION TO IMAGE -->
<figure class="textover">
  <img src="sleep-doge.jpg"/>
  <figcaption>It's just a sleepy boi.</figcaption>
</figure>

The HTML should be straightforward and easy to understand:

  • Captain Obvious to the rescue, we define the image tag <img> as usual.
  • Attach the text (or image caption) using <figcaption>.
  • Finally, wrap the image and caption in a <figure>.

Some of you guys who have gone through other tutorials and examples may be wondering – Why not just use a generic <div>? Well, that will work as well. But one key advantage of using <figure> and <figcaption> here is search engine optimization (SEO). Yep, these tags will give search engines more hints as to what the image is about with the captions.

 

 

STEP 2) RESPONSIVE IMAGE

1-simple-text-over.html
/* (B) RESPONSIVE IMAGE */
.textover img { width: 100%; }
.textover { max-width: 600px; } /* OPTIONAL */

Next, we move into the CSS.

  • Adding width: 100% to the image will pretty much solve the modern-day pain of “responsive image for mobile support”. This will automatically scale the image to fit the full width of the screen.
  • The max-width is optional, set this to limit how much the image can stretch.

 

STEP 3) POSITION THE IMAGE CAPTION

1-simple-text-over.html
/* (C) POSITION CAPTION */
.textover { position: relative; } /* REQUIRED */
.textover figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
}

Moving on, we need to position the text caption over the image.

  • Setting position: absolute on the figcaption will pretty much do the trick. But take note, this will position the caption relative to the nearest positioned parent.
  • This is why we need to set position: relative on the <figure> container itself. I.E. If we don’t do this, the caption will be positioned relative to <body> instead.

 

 

STEP 4) TEXT CAPTION COSMETICS

1-simple-text-over.html
/* (D) CAPTION COSMETICS */
.textover figcaption {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  color: white;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
}

Finally, the rest is pretty much dealing with cosmetics. Set the background color of the caption, choose your font, font size, font-weight, color, etc…

 

CENTER TEXT ON IMAGE

So far so good? Let us expand on the above basics a little more, and this one is for you guys who want to center the text on the image.

 

CENTER TEXT DEMO

It’s just a sleepy boi.

 

CENTERING THE TEXT

2-center-text.html
<style>
/* (B) RESPONSIVE IMAGE */
.textcenter img { width: 100%; }
.textcenter { max-width: 600px; } /* OPTIONAL */
 
/* (C) CENTER TEXT ON IMAGE */
.textcenter { position: relative; }
.textcenter figcaption {
  position: absolute;
  /* VERTICAL CENTER */
  top: 50%;
  left: 0;
  /* HORIZONTAL CENTER */
  width: 100%;
  text-align: center;
  /* COSMETICS */
  color: blue;
  font-size: 22px;
  font-weight: 700;
}
</style>

<figure class="textcenter">
  <img src="sleep-doge.jpg"/>
  <figcaption>It's just a sleepy boi.</figcaption>
</figure>

Look no further, this is pretty much the same as the previous example. Except that it has been positioned differently:

  • To vertically center the text on the image, we set top: 50% . Easy?
  • To horizontally center the text, we simply set the <figcaption> to width: 100% and text-align: center. Very easy?

There, done and centered. Who says it’s difficult!?

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

How To Place Text Over Image In CSS HTML (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *