CSS image replacement

CSS image replacement is a Web design technique that uses Cascading Style Sheets to replace text on a Web page with an image containing that text. It is intended to keep the page accessible to users of screen readers, text-only web browsers, or other browsers where support for images or style sheets is either disabled or nonexistent, while allowing the image to differ between styles. Also named Fahrner image replacement for Todd Fahrner, one of the persons originally credited with the idea of image replacement in 2003.
Motivation.
The typical method of inserting an image in an HTML document is via the codice_1 tag. This method has its drawbacks with regards to accessibility and flexibility, however:
Fahrner image replacement was devised to rectify these issues.
Implementations.
The original Image Replacement implementation described by Douglas Bowman used a heading, inside of which was a codice_5 element containing the text of the heading:
<h3 id="firHeader"><span>Sample Headline</span></h3>
Through style sheets, the heading was then given a background containing the desired image, and the codice_5 hidden by setting its codice_7 CSS property to codice_8:
 width: 300px;
 height: 50px;
 background: #fff url(firHeader.gif) top left no-repeat;
 display: none;
It was soon discovered, however, that this method caused some screen readers to skip over the heading entirely, as they would not read any text that had a codice_7 property of codice_8. The later Phark method, developed by Mike Rundle in 2003, instead used the codice_11 property to push the text out of the image's area, addressing this issue:
 width: 300px;
 height: 50px;
 text-indent: -5000px; /* ← Phark */
The Phark method had its own problems, however; in visual browsers where CSS was on but images off, nothing would display.
Also in 2003, Dave Shea's eponymous Shea method solves both of the issues earlier mentioned, at the cost of an extra codice_5:
<h3 id="header"><span></span>Revised Image Replacement</h3>
By absolutely positioning an empty codice_5 over the text element, the text is effectively hidden. If the image fails to load, the text behind it is still displayed. For this reason, images with transparency cannot be used with the Shea method.
 width: 329px;
 height: 25px;
 position: relative;
 background: url(firHeader.gif) no-repeat;
 position: absolute;
 width: 100%;
 height: 100%;
Over a dozen different methods has since been developed with varying degree of compatibility and complexity.