Web Design in a Nutshell, 3rd Edition

The Gilder/Levin Method

This technique, named after Tom Gilder and Levin Alexander, is a bit different than the others in that it displays the text but immediately covers it up with an opaque image placed in an empty span. This is the only image replacement technique that does not suffer from the CSS-on/Images-off accessibility issue.

    <h1 id="header">
        <span></span>This is the Headline
    </h1>
     
    #header {
        width:240px;
        height: 20px;
        position: relative;}  */ makes this the containing block */
     
    #header span {
        background: url(headline.gif) no-repeat;position: absolute;
        width: 100%;
        height: 100%; }

This method offers the following advantages:

• Screen reader-accessible.

• The text displays if the image doesn’t, solving the CSS-on/Images-off dilemma.

Disadvantages include the following:

• It uses a non-semantic empty span.

• Transparent images allow the text behind them to show through.

• Resizing text very large may allow the text to show around the image edges.