How to use CSS Image Replacement
(
NB: These techniques assume a reasonable knowledge of HTML and CSS. Some require better browsers than others, but most should work in IE5 and above, Netscape 6+ and Opera 6+. I said
most!)
There are various techniques that allow a designer to replace standard text with an image. But why would we want to do this in the first place?
The Whys
Consider this:
We all have a logo. It's one of the most enduring features of any website. Currently, most of us code our logo something like the following:
Code:
<div id="masthead">
<img src="/images/mylogo.png" alt="My Company" width="150" height="50" />
</div>
and think no more about it. If we really want, we enclose the image in an <h1></h1> element, but that's about it.
The approach we're all used to is fine. It works solidly and is perfectly functional. So why go messing around with it?
My answer is simple (though others have their own reasons for doing this): Search engines prefer text. So instead of that image tag, why not simply do this:
Code:
<div id="masthead">
<h1><span>My Company</span></h1>
</div>
or even better, this:
Code:
<div id="masthead">
<h1>My Company</h1>
</div>
and control the appearance of the logo (and subsequent
disappearance of the text) via CSS.
The Hows
Yes there's more than one way to skin a cat. Bear with me.
1. The Fahrner Image Replacement (FIR) Technique
The classic. Easy to implement and just works. Which is nice.
The HTML
Code:
<div id="masthead">
<h1><span>My Company</span></h1>
</div>
The CSS
Code:
#masthead h1 {
background:transparent url("/images/mylogo.png") no-repeat top left;
width:150px;
height:50px;
}
#masthead h1 span {
display:none;
}
The text is placed within <span></span> tags, which are then instructed via the CSS to not display. Solid support across browsers, but adds redundant non-semantic <span></span> tags to your markup.
2. The Leahy/Langridge Technique
More complicated. Involves setting padding for the height of the image, hiding overflow to get rid of the text, setting height to 0 for good browsers, but overriding that for IE5, because IE5 needs a height definition.
But this technique doesn't require an additional <span></span> element in the HTML.
The HTML
Code:
<div id="masthead">
<h1>My Company</h1>
</div>
The CSS
Code:
#masthead h1 {
width:150px;
padding:50px 0 0 0;
overflow:hidden;
background:transparent url("/images/mylogo.png") no-repeat top left;
height:0px !important; /* for most browsers */
height /**/:50px; /* for IE5 */
}
Less solid support than "Classic FIR", above. IE5's support is a bit flaky, for example. 5.5 and above is fine, but avoid if you support IE5 (or until IE5 finally dies).
3. The "Off-Screen" Technique (Credit Unknown)
A technique that is remarkable in its simplicity. The idea is to "push" the text off the left hand side of the screen using text-indent with a negative value. Then the element is set a background-image as before. To stop any text leaking through accidentally, we also set overflow to hidden.
The HTML
Code:
<div id="masthead">
<h1>My Company</h1>
</div>
The CSS
Code:
#masthead h1 {
text-indent:-100em;
overflow:hidden;
background: transparent url("/images/mylogo.png") no-repeat top left;
width:150px;
height:50px;
}
Support unknown (by me!) at present. Seems extremely simple, and may offer the best compromise if browser support is solid. Doesn't appear to require a redundant <span></span> element.
The Problems
There is one problem with all these techniques, but its severity is minor. All the techniques fail to show anything at all if a user agent visits the page with CSS turned
on but images turned
off.
How likely this is to be is a matter for individual designers to decide. I am of the opinion that anyone who would know how to turn on and off CSS and images in a browser is likely to be savvy enough to realise their own settings may be the problem. Most (non-web) folk leave their browser settings at the default.
A further issue is accessibility.
Alistapart's article, (by Joe Clark) expands on this further.
Conclusion
A powerful and easy-to-use technique that could theoretically improve your search engine rankings through the use of
real headers. Has accessibility issues, and a few browser problems with some interpretations. Use with care, and in moderation.
Oh, and do some reading about the pitfalls!
Linear Mode
