CSS: Text over Image – Add Text Caption to Images

by Yang Yang on February 8, 2009

in CSS & HTML Tips

Share This Article:
Subscribe to Kavoir: blog feed

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.

Share This Article:
Subscribe to Kavoir: blog feed

You should also read:

{ 22 comments… read them below or add one }

Stephen February 25, 2010 at 6:08 pm

Worked a charm, thanks!

Reply

Yang Yang February 26, 2010 at 4:50 pm

Awesome!

Reply

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.

Reply

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.

Reply

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

Reply

simon September 5, 2010 at 5:37 pm

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

Reply

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.

Reply

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.

Reply

neye November 26, 2010 at 11:34 am

thank you so much ^^

Reply

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

Reply

Andy December 16, 2010 at 4:49 am

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

Reply

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?

Reply

paolo March 14, 2011 at 6:10 am

this is kind of magic! thanks very smart!

Reply

Gery April 5, 2011 at 2:11 am

Thx! easy & brilliant!

Reply

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?

Reply

RJay April 18, 2011 at 2:09 pm

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

Reply

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

Reply

risdiyanto May 8, 2011 at 9:54 pm

thx,..
very helpfull

Reply

Alessandro July 2, 2011 at 8:21 pm

Great post! Thank You very very much!

Reply

Chunku September 22, 2011 at 4:51 pm

Many many thanks………..

Reply

Vinay October 3, 2011 at 8:35 pm

thanks a lot it was very useful :)

Reply

Edward November 27, 2011 at 2:47 am

Thank You very much for this info : )

Reply

Leave a Comment

Previous post:

Next post: