Adding a Caption to an Image with CSS

You are here: Home » Tips & Tricks » Adding a Caption to an Image with CSS

Adding a Caption to an Image with CSS

CSS tip to add a caption or title to an image on your website. Easy to follow example. Test it out and play with the settings to create your own look.

By Linda Chadbourne on March 17th, 2008 in Tips & Tricks |

Want an easy way to add a caption to an image like this?

banana Adding a Caption to an Image with CSS

HTML

<div class="imagecaption">
<img src="your-image-here.jpg"/>
<alt ="banana" width="150px" height"100px" /><p>Banana With a Peel</p> </div>

CSS

.imagecaption {
      width: 200px;
      border: 1px solid #999999;
      padding: .5em;
      }
p {
      font: small Verdana, Arial, Helvetica, sans-serif;
      text-align: center;
      }

Did you like it?

Help us spread the word!

About The Author

Linda Chadbourne

Linda Chadbourne has been a web designer since 1998. A large portion of her day also involves graphic and logo design for Maine-ly Web Design which she owns and operates. Linda is also one of the co-founders of The Web Squeeze which is a Web Design and Development Help Forum. In her free time she is an avid family person, horseback rider and reader.

Comments

ThomasH said :
July 17th, 2008 at 4:43 am

This isn’t really valid code, is it?

That should be a single line:

Oh, and I’ve noticed that leaving out the px in height and width sometimes screwes up things.
Karinne Legault said :
July 17th, 2008 at 8:24 am

Hmmm… why is it not valid code? And what should be in one line?

Units are very important, you should never leave them out … never. Unless of course you have a value of 0. Then 0px or 0em or 0% it’s all the same. It’s still 0.
GTL said :
January 1st, 2009 at 10:50 pm

<img src=”your-image-here.jpg”>
<alt=”Stacked” width=”150″ height”100″ />

should read:

<img src=”your-image-here.jpg” alt=”Stacked” width=”150px” height=”100px” />
Linda Chadbourne said :
January 2nd, 2009 at 10:03 am

Well it seems this post got a little messed up. Thanks for seeing the errors! It’s fixed now!

Toggle Trackbacks

Web Design and Web Development Help

Squeezing all the info out of Web Design and Development!

Adding a Caption to an Image with CSS