TIPS - CSS: Professional Techniques for Modern Layout - page 84

h e one edge case where this sort of replacement fails is when a user has a browser with CSS
enabled but image display disabled, and, more commonly, if the image fails to load for some
reason. In those cases, the heading text will simply disappear, as in Figure 3-10, and not be
replaced by the background image.
86
Figure 3-10: The result when the image is not available.
h ere are about a dozen dif erent image-replacement techniques, each with its own unique
approach to the problem. Some involve wrapping the element's content in a span and
suppressing its display or throwing it of -screen; others have you adding an extra image as
content that mirrors the background image.
One image replacement technique is worth mentioning here: using an image in the content
and nothing else. For example:
< h1> < img src="page-header.gif" alt="Dive Into Fishing"> </ h1>
In this case, the image will show up both on-screen and in prnt, since browsers do print
content images. It will also be very friendly to screen readers, which know to use the alt text
in place of the image. It does, again, fall down if the user has suppressed the loading of
images—though in cases where images are enabled but the image somehow fails to load, the
alt text should be shown in the image's place.