Simple CSS Image Replacement: Explaining the Concept and Popular Techniques

Simple CSS Image Replacement: Explaining the Concept and Popular Techniques
Page content

Image Replacement 101

You might have heard of ‘image replacement’ (IR) as a way to replace text in a webpage with an image by use of Cascading Style Sheets; for example, replacing an

text heading with a stylized logo. You may want to include the company’s name as actual text for SEO benefits, but ideally you would want it to be displayed as your logo mark, not un-styled text. (Click image for a larger view.)

This way, the content remains accessible to search engines and screenreader software while providing a more visually attractive page to other users.

There are several methods to achieve this; some rely on extra elements, some on JavaScript and some on Flash. Unfortunately, there is no perfect solution and each has its own drawbacks and advantages depending on the use-case. In this article we’ll be taking a look at two simple techniques which will, by and large, cover most situations you may encounter as a standards-conscious web developer.

The Concept

The original technique, known as Farhner Image Replacement (FIR) was described by Doug Bowman way back in 2003, and while it still stands today, it is not recommended for use because of issues with screenreaders and search engine robots. It is useful, however, in understanding what the concept of image replacement proposes.

As we know, IR basically replaces an HTML element with a background image with CSS. For example,

EA Sports

CSS:

h1 {

background: url(ealogo.png) no-repeat;

height: 90px; width: 90px;

}

h1 a {

display: none;

}

The CSS applies our stylized logo as the background image of our

tag and hides the text in the link. The page therefore shows the logo image instead of the plain text when rendered. The inner element (in this case an tag) could be anything else of course – for example, a .

That is the basic concept. However, as stated, the code above is generally not recommended.

Phark Method

The Phark method was developed by Mike Rundle and is arguably the most popular technique in use today. Instead of using display: none; to hide the text, we simply push it off the page with the CSS property text-indent. So with the same basic HTML as above, the CSS becomes

h1 {

background: url(ealogo.png) no-repeat;

height: 90px; width: 90px;

}

h1 a {

text-indent: -9999em;

}

The negative text-indent pushes the text outside of the viewable portion of the page, and while it is still there, it is essentially invisible to the user.

The added benefit of this technique is of course that it eliminates the issues with screenreaders and search bots. Moreover, it does not require the use of the inner element as FIR does so our HTML could simply be

EA Sports

It would still work without the extra markup.

The one disadvantage with the Phark method is that it would not work if your visitor has images turned off in their browsers. In that case, the text would ‘disappear’ but the background image to replace it would not load, thereby leaving that space empty and inaccessible. This is of course, something you may choose to live with depending on the audience of your website, but it is one thing to keep in mind when using the Phark method.

Head over to the next page to see the next technique.

Image-on-Top Method

Credited to Levin Alexander, this technique solves the issue of content becoming unusable with CSS on and images off. Instead of hiding the text or moving it off the page, we simply place the image on top of the text.

The HTML:

EA Sports

You’ll notice the extra tags after the text inside the

element, which is an unfortunate requirement of this method.

CSS:

h1 {

width: 90px; height: 90px;

position: relative;

}

h1 span {

background: url(ealogo.png) no-repeat;

position: absolute;

width: 100%;

height: 100%;

overflow: hidden;

}

The empty element is positioned absolutely over the text, given the image as its background and overflow is hidden so that the text does not peek through from the sides.

Transparent images cause ugliness

Of course, you may have also realized that this technique would not work with transparent images, as the text behind them would show through. Unacceptable ugliness!

If your image is opaque, however, this technique is arguably better than the Phark method since it doesn’t break the website in the elusive CSS on, images off situation.

Which Is Best?

Unfortunately, there is no perfect solution to this problem. Which method you choose to implement depends on your specific requirements for the website you’re building. If you don’t believe any of your visitors would have CSS on but images off, or have transparent images then go for Phark; if you want to make sure content remains accessible in all cases, or are okay with the extra markup then the Image-On-Top method is the way to go.

There are other methods, of course. For example, there’s sFIR if all you want to do is replace fonts, which involves the use of Flash. There are also JavaScript and jQuery implementations you might choose. However, the techniques showcased above should cover you for most cases.