CSS: Text over Image – Add Text Caption to Images

by Yang Yang on February 8, 2009

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="http://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.

Subscribe to Kavoir: blog feed

You should also read:

Stephen February 25, 2010 at 6:08 pm

Worked a charm, thanks!

Yang Yang February 26, 2010 at 4:50 pm

Awesome!

helloworlder July 7, 2010 at 4:37 pm

Thanks, this is great! Some examples use a background image, which I think is often semantically incorrect.

Vernon July 28, 2010 at 4:34 pm

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.

finieramos July 30, 2010 at 9:06 am

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!!

simon September 5, 2010 at 5:37 pm

Thank you!!
This helps me out a lot!!!

simon September 5, 2010 at 5:39 pm

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.

Yang Yang September 7, 2010 at 8:39 am

I don’t think you have to. Just write the styles with the outter wrap that contains all the image slices.

neye November 26, 2010 at 11:34 am

thank you so much ^^

S.Rajasekar November 30, 2010 at 2:43 pm

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……………….

Andy December 16, 2010 at 4:49 am

How would I go about adding a transparent background under the text?

bobbi February 13, 2011 at 1:50 am

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?

paolo March 14, 2011 at 6:10 am

this is kind of magic! thanks very smart!

Gery April 5, 2011 at 2:11 am

Thx! easy & brilliant!

Peter McCartney April 17, 2011 at 12:38 am

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?

RJay April 18, 2011 at 2:09 pm

Thanks for the CSS tip. Just used it on our site.

carol April 26, 2011 at 8:09 am

excellent I needed this tutorial. I put my text down the bottom with an opaque background. Thanks very much

risdiyanto May 8, 2011 at 9:54 pm

thx,..
very helpfull

Alessandro July 2, 2011 at 8:21 pm

Great post! Thank You very very much!

Chunku September 22, 2011 at 4:51 pm

Many many thanks………..

Vinay October 3, 2011 at 8:35 pm

thanks a lot it was very useful :)

Edward November 27, 2011 at 2:47 am

Thank You very much for this info : )

myrthel March 1, 2012 at 6:33 pm

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!

sandy March 2, 2012 at 7:07 pm

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

Azoz May 17, 2012 at 9:20 pm

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

Jeffrey Meyer March 10, 2012 at 10:13 pm

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,

cherry June 3, 2012 at 3:04 pm

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

cherry June 5, 2012 at 12:01 am

can you help me please. i need to get answer as soon as possible..

Luiz Ikeda June 28, 2012 at 5:57 am

Thank you!

James August 22, 2012 at 3:14 pm

Thanks mate. Lifesaver!

Raghavendra.Padasalgi August 29, 2012 at 11:27 am

Thanks so much. I have been searching for this type of code since 4 days.I am quite new to css etc I want to know how to insert /overlay texts on the rotating background images.
Please advise.
e.g.
http://demo.fearlessflyer.com/html/demo/rotating-bg/

TehNub August 29, 2012 at 11:35 am

Well, I did not use the same code, but some-what the same method. So thanks for helping me figure this out.

High-Flying September 9, 2012 at 7:50 pm

Helped me out thank!

natto September 13, 2012 at 7:20 pm

Just what I was looking for – thank you very much.

Jose September 15, 2012 at 6:03 am

You are the best I really appreciate this. Thank you thank you.

Gilgamesh November 7, 2012 at 9:51 pm

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);

Ryan G January 29, 2013 at 3:18 am

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

Sasha Hohri February 19, 2013 at 7:16 am

This was really helpful. It was very easy to use. Thank you!

Lelala April 28, 2013 at 4:39 am

Thanks for that post – now i know why my implementation didn ‘t work :-)

Comments on this entry are closed.

Previous post:

Next post: