Simon Willison’s Weblog

A better image replacement technique

5th August 2003

Over on Kryogenix, Stuart has solved the CSS image replacement problem with some clever application of the overflow: hidden; property. The Fahrner Image Replacement technique is often used to replace a heading with a background image (see most of the designs in the CSS Zen Garden for examples), but has the disadvantages that it requires an additional <span> tag to be added to the code and that some screen readers which follow the display: none; directive skip straight over the replaced text without reading it. Stuart’s new technique solves both problems, and works in modern browsers from IE 5/Win upwards.