Using CSS to input images is a somewhat perilous task. Currently supported css specifications only intended images to be inserted as the background of an element. Backgrounds dont get alt or title tags, and if someone views the page either with CSS off, or with an older browser on a page that @import’s the style sheet there will be something missing. People can live without a cool background – headers they can’t. It does look garish to have 400-500 pixel headers in the middle of a basic html document (not to mention the scrolling headaches for PDA/Cell users), so putting the tags in the (x)html itself itself isn’t ideal either.

It is a compromise at this point, but there are ways to minimize the consequences arising from this. It’s mainly a matter of what you value: compatibility or cleanliness. Dave Shea has an overview of techniques as of March 2004. A similar page, more visually oriented from that time can be found here. One of more annoying conditions is when a user (on dial-up or are just plain perverse) has CSS enabled, but at the same time turned off images.

While Scalable Inman Flash Replacement (sIFR) is a much cleaner method, the UCLA logo has some rather unique kerning and styling applied so rendering it on the fly is not possible at this moment. :| There is a fairly large school of thought that disapproves of IR.

Cleanliness

After a Darwinian struggle of techniques the Rundle/Phark emerged as a simple elegant cross browser solution. The only problem is that it does not solve the CSS on & images off combination. For intranet sites this may not be a concern but it needs to be kept in mind. Sample code is below.

<h3 id="header" title="description">Headline</h3>
	
/* css <strong>/
#header {
     text-indent: -5000px;
     background: url(sample-opaque.gif);
     height: 25px;
     }

Usability

If you are not using transparent images and don’t mind a bit of extra markup, the Gilder/Levin method is for you. Sample code is below.

<h3 class="replace" id="myh1" title="description">Headline<span></span></h3>
	
.replace {
     position: relative;
     margin: 0;
     padding: 0;
     /</strong> hide overflow:hidden from IE5/Mac */
     * \*/ overflow: hidden; /* */ 

}
	
.replace span {
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1; /*for Opera 5 and 6*/
     }
	
#myh1, #myh1 span {
     height: 100px;
     width: 300px;
     background-image: url(head.png);
     }

Levin created a table of when he deemed it appropriate to use different techniques.

Other solutions

A recent addition is the Malarkey method, which if nothing else shows some creative ways to use image replacement (list items as opposed to just headers).

For the idealists out there, they can try to implement the CSS3 spec generated content module, which should address all the issues currently with image replacement with minimal markup. Of course it’ll take a while before this is widely supported.

h1 {
     content: url(image.gif);
     }