Image replacement is an excellent idea, in principle. It allows typographic control for designers, without sacrificing anything in accessibility. In principle. In practice, it usually means adding in extra markup, or doesn't work as intended.

It's also a huge headache for any designer hoping to understand it. There are a huge number of techniques out there for image replacement, each with its own strengths and weaknesses. With that in mind, I might as well confuse the issue by adding another option to the mix.

(A quick note - though I've not seen this method mentioned elsewhere, it is perfectly possible someone has already come up with this. My apologies if so!)

This method involves, rather than placing the image in front of the text or moving the text off-screen, using the image to move the text outside the viewable area of an element. It also involves using CSS2.1, which is not yet supported in the most-used browser, Internet Explorer.

The principle is pretty simple. The :before pseudo-selector allows us to add a child to an element (the :before selector creates a pseudo element within the element it is applied to). With just a little CSS, we can use that to insert an image before some text, moving the text down. We can then use the overflow property to hide that text. If images are off, the text will not be moved and will appear normally.

Before I run through a demonstration, I should add that IE does not support this method of image replacement. This is because it does not support the :before pseudo selector. However, this should just mean that IE users see a regular styled element rather than the image. It is also important to remember that a height attribute is set on the element being replaced.

Dave Shea has a run down of other image replacement techniques, and adds in his introduction that the best technique would work back to 5.x browsers. I would love to use a technique that worked back to 5.x browsers, but practically the only techniques that are likely to achieve that are those that involve the insertion of extra markup and various hacks. I personally would prefer a technique that degraded well and didn't present those kinds of issues, which is why I like this technique - no extra markup. IE users and those with older browsers should just see styled text, which is fine by me.

How it works

<h1>ILoveJackDaniels.com</h1>
We have this element within a page and want to replace it with an image. When styled normally it might look something like this:



We start by inserting the image with the :before pseudo selector.

h1:before {
content: url("http://www.ilovejackdaniels.com/images/v3logo_no_bg.png");
}


We need to move the text below the image. We can do that with a simple display: block. (Note - if you don't want display: block, you can simply set a width for the element being replaced equal to that of the image replacing it).

h1:before {
display: block;
content: url("http://www.ilovejackdaniels.com/images/v3logo_no_bg.png");
}


Finally, we need to reduce the viewable area of the h1 tag so that the text is no longer visible. We can do that by setting a height for the tag and specifying that anything outside of the element should be hidden, giving us this final code:

h1:before {
display: block;
content: url("http://www.ilovejackdaniels.com/images/v3logo_no_bg.png");
}

h1 {
overflow: hidden;
/* Height of image */
height: 80px;
}
Those with capable browsers can see it in action on this example page.

A quick note - if you wanted to make the image a link, you would wrap the text of the h1 in a link tag and then change the first line of the above styles to "h1 a:before".

I have not tested this image replacement technique extensively - only on the major browsers - so please do feel free to post your thoughts in the comments area, especially concerning potential problems.
 

Name:

Location:

Email (hidden):

URL:

Comment:

Remember Me: