That Web Guy Blog

Follow me on Twitter

Today I stumbled on a blog with a gorgeous design and what appeared to be some nice code. I won't mention the site name in the interest of not upsetting anyone, but looking closer I noticed something I've often seen used for headings. Considering the job done on that site was excellent otherwise, this was very surprising.

Using images for headings often provides the nice extra bling that standard fonts can't always provide. And it's fine as long as you do it properly - with CSS.

Doing it the wrong way usually looks something like this:

<h1><img src="my_portfolio.gif" width="150" height="100" alt="My Portfolio"><h1/>

The problem here is obvious. Where's the heading? Semantically speaking there isn't one, so to fix this you simply set up your headings the normal way...

<h1>My Portfolio<h1/>

...and then follow up with some CSS:

h1 {
width: 150px;
height: 100px;
text-indent:-9999em;
background-image: url(my_portfolio.gif);
}

Text-indent simply moves the text -9999em's off screen so that it isn't visible on top of your nice graphic. The width and height are important (they need to match the image dimensions) otherwise the image will tile.

You can of course use this technique on any HTML element, but when you want headings it's always better to use the appropriate tag (h1, h2, h3 etc...) with the heading text contained within, and let CSS take care of the rest.

Too easy. Download the demo below.

image_headings.zip (5k)

Comments

Stanze

Awesome method. Danke!

http://www.thatwebguyblog.com/post/css_101_using_images_in_headings#comm156

Monday 22nd June 2009 | 08:13 PM Reply Comment URL Back to top

ScottFoley

This is a brilliant method of being to keep your keywords in your tags yet being able to style them so they look good. We've been using this for a while and encourage people to do the same.

Just be careful. Make sure your header text matches what you have on your image. Otherwise Google may this as cloaking. If everything matches then you aren't trying to deceive anyone and merely providing a better user experience while at the same time keeping accessible for search engines. Only Google knows the exact limits of this but in the year or two I've been doing this I have yet to run into any issues.

Great article.

http://www.thatwebguyblog.com/post/css_101_using_images_in_headings#comm316

Thursday 12th November 2009 | 08:52 AM Reply Comment URL Profile Back to top

That Web Guy

Responding to this comment by ScottFoley

Thanks. That's very true. I tackled that issue here: http://www.thatwebguyblog.com/post/demystifying_googles_text_indent_mystery

http://www.thatwebguyblog.com/post/css_101_using_images_in_headings#comm319

Thursday 12th November 2009 | 11:28 AM Reply Comment URL Profile Back to top