CSS Image Replacement

CSS gained popularity after it was discovered that HTML elements (e.g. headers) could be replaced by an image, by only changing the CSS. There are a few techniques to do this.

The tricks listed here come mostly from Designing With Web Standards by Jeffrey Zeldman.

Content Element
Header
 * 1) pageheader { content: url{header.png}; width: 300px; height: 80px; }

Pro: Standard in CSS 3 Con: Not supported yet (only by Opera)

Fahrner Image Replacment (FIR)
Header


 * 1) pageheader { background: url{header.png} no-repeat; width: 300px; height: 80px; }
 * 2) pageheader span { display: none; }

Pro: Works in all regular browsers (no browser-specific hacks required) Con: needs extra tag. Doesn't work with CSS-on, images-off; not screen-reader accessible.

Rundle Image Replacement
Header text-indent: -5000px; }
 * 1) pageheader { background: url{header.png} no-repeat; width: 300px; height: 80px;

Pro: clean CSS, screen-reader accessible. Con: doesn't solve solves CSS-on, images-off.

Leahy / Langridge Image Replacement
Header

padding: 80px 0 0 0; overflow: hidden; }
 * 1) pageheader { background: url{header.png} no-repeat; height: 0px !important;

Pro: no extra span; screen reader accessible Con: Doesn't solve CSS-on, images-off problem. Need hacks for broken IE overflow (not shown)

Levin Image Replacement
Header

.replace { position: relative; margin: 0; padding: 0; overflow: hidden; } .replace span { position: absolute; display: block; z-index: 1; }
 * 1) pageheader, #pageheader span { background: url{header.png} no-repeat; width: 300px; height: 80px; }

Pro: screen-reader accessible, solves solves CSS-on, images-off. Con: bulky CSS. Need hacks for broken IE overflow (not shown). Need hack for Opera (z-index shown). Can't use transparent images.