CSS Image Replacement

From Exterior Memory
Jump to: navigation, search

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

<h1 id="pageheader">Header</h1>

#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)

<h1 id="pageheader"><span>Header</span></h1>
#pageheader { background: url{header.png} no-repeat; width: 300px; height: 80px; }
#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

<h1 id="pageheader">Header</h1>

#pageheader { background: url{header.png} no-repeat; width: 300px; height: 80px; 
  text-indent: -5000px; }

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

Leahy / Langridge Image Replacement

<h1 id="pageheader">Header</h1>
#pageheader { background: url{header.png} no-repeat; height: 0px !important; 
  padding: 80px 0 0 0; overflow: hidden; }

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

<h1 id="pageheader" class="replace">Header<span></span></h1>
#pageheader, #pageheader span { background: url{header.png} no-repeat; width: 300px; height: 80px; }
.replace { position: relative; margin: 0; padding: 0; overflow: hidden; }
.replace span { position: absolute; display: block; z-index: 1; }

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.