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.
Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.