CSS 101 – Using images in headings
Written June 18, 2009. 4 comments.
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.
Start of pageWho is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
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.
Is it a technical thing, an SEO thing, an anti-”spam” thing? Do search engines just ignore the ALT, here? How is that “semantically correct”? Surely, by definition, anything inside the H1 *is* a heading, and should be treated as such, regardless of whether it’s plain text, an image, a CANVAS etc etc…
Am I the only one that thinks that having to use image replacement for this situation is wrong?