CSS: Text over Image – Add Text Caption to Images

39 Comments / CSS & HTML Tips / By /

Putting text over image or pictures is a good way to give simple title information to that image or declare copyrights without tampering with the image itself.

Real texts on an image with CSS
text over image demo in html & css

This lovely image gladly demonstrates how I (this text) can be flying over her face.

It’s very kind of her but don’t you agree that this place needs a camp fire and a little love?

The HTML
<div class="image">
  <img alt="" src="https://www.kavoir.com/img/text-over-image.jpg" />
  <div class="text">
    <p>This lovely image gladly demonstrates how I (this text) can be flying over her face.</p>
    <p>It's very kind of her but don't you agree that this place needs a camp fire and a little love?</p>
  </div>
</div>
The CSS
.image {
	position:relative;
	float:left; /* optional */
}
.image .text {
	position:absolute;
	top:10px; /* in conjunction with left property, decides the text position */
	left:10px;
	width:300px; /* optional, though better have one */
}

To position the text somewhere just modify the top and left property. For instance, place them at the the bottom right of the photo, just use right:10px and bottom:10px.

To have more than one text paragraphs positioned at different portion of the image, just add more <div class=”text”></div> and style them separately.

Related Posts

39 thoughts on “CSS: Text over Image – Add Text Caption to Images”

  3. Vernon

    Thank you so much. I was also trying to avoid using a background image, as it was hard to size it within the space (when the image is changing dynamically and not the same size). As usual, a css positioning problems that I have been struggling with for an hour or so has such a simple solution.

  4. finieramos

    I try to use this method where i put a text and another php object and placed it on the image which i add a link on the image..but it wont work in Internet explorer, works only in morzilla and google chrome…help!!

  6. simon

    I forgot to ask- If you splice the picture for better downloading times, do you have to position the text according to each splice? I’d guess yes, but was just wondering.

  8. S.Rajasekar

    Hai,
    This code is very useful to me ……
    i will using this code to check printing …….
    Check printed successfully…
    CSS is Very Good….

    Thank you……………….

  10. bobbi

    my image is centered and when i use this code and change the size of the browser window, the text moves on and off of the image… how do i fix this?

  13. Peter McCartney

    Hi and thank you for your information article. I’ve used CSS to add a background image and it works well, except the background image does not show in the atom/rss feed. Any ideas on how to get it to show in those feeds or should I revert back to a HTML table as the background image shows in feeds?

  21. myrthel

    THank you so much, i am wonder I have already used your code for my text over the image, now i want to put some more text in another box whick lays text to the first box with some padding between, do you know how to do this? thank you!

  22. sandy

    Hi, i was using the above code..it was working quite as shown..bt when i try to put the same code in Sql SEver 2005 and Exec the Stored Procedure(the one i created for mail) the mail body will show the image perfectly,but the text will be below the image,not on the image.can any1 please help me for .i.e How to put text on image in Sql server Stored procedures.I am using html and CSS for mail body.

    Thanks in advance

    1. Azoz

      Hi if you would like to have the perfect code you should specify this too:
      in the
      .image{
      position:relative

      /*add this below it’s important
      this will guarantee that the text will alyways be inside your image
      now you just need to change the top or left in the .text{} as you like 🙂 */

      width: /*width of your image */
      height: /*height of your image */

      }

      take care

  23. Jeffrey Meyer

    Thank you very much for sharing! I’m designing a new website, and your code worked perfectly for helping me place some text over a picture! I really liked how you separated the HTML code from the CSS code, which is very helpful for people like me who are new to the world of CSS coding. Cheers,

  24. cherry

    what if i only have one liner paragraph and i want to put it on the bottom center of the image?

  32. Gilgamesh

    With a small amount of editing, this can be used remarkably effectively. Especially when using transparent backgrounds on the text.
    For example:
    background:rgba(255,255,255,0.7);

  33. Ryan G

    Does text block over image help increase Google ranking for images? Does Google see the css?
    Great site.

Comments are closed.

Scroll to Top