Image Replacement

From CSS Standards FAQ

Jump to: navigation, search

Image replacement is the technique of replacing text with an image. This technique is used for headings where nice typography and specific fonts are required. Image replacement should not be used on large blocks of text. Also, be careful not to misuse these techniques for replacing content-related images - these should always use the img element. There are numerous image replacement techniques, all of which have strengths and weaknesses.

Contents

History of Image Replacement Techniques

The first technique devised with the use of CSS is known as Fahrner Image Replacement (FIR). Although, this technique has long been deprecated it is worth while to read articles pertaining to it, to shed light on the technique itself, the reasons why it is no longer used and why image replacement was needed in the first place. A List Apart have an article called "Facts and Opinion About Fahrner Image Replacement", Douglas Bowman's Using Background-Image to Replace Text and In Defense of Fahrner Image Replacement an Digital Web Magazine article by Dave Shea are worth reading.

Methods & Examples

A common use of image replacement is for replacing the company or site title with a graphic. The examples below show the code to achieve this replacement.

Fahrner

Original image replacement technique by Todd Fahrner - http://www.alistapart.com/articles/fir/

Phark

Method devised by Mike Rundle - http://phark.typepad.com/phark/2003/08/accessible_imag.html

 h1 a {
   display:     block; /* we need this to be able to set width and height, which doesn't apply to inline-level elements */
   height:      100px;
   width:       100px;
   text-indent: -9999px; /* moves text to the side */
   overflow:    hidden; /* hides text (just in case) also, on links hides unneeded part of "dotted border" aka outline when clicked */
   background:  url(images/logo.gif) no-repeat;
 }

Gilder/Levin

Method devised by Tom Gilder & Levin Alexander - http://levin.grundeis.net/files/20030809/alternatefir.html

This method requires extra markup, usualy an empty span element within the container.

Shuan Inman Flash Replacement (sIFR)

A JavaScript/Flash replacement method devised by Shaun Inman and maintained by Mike Davidson - http://www.mikeindustries.com/sifr/

Further Reading

Personal tools