CSS to replace text with an image

Here is some CSS to replace a piece of text with a graphic:

  .replace {

   height:57px;

   background:url("ReplacedText.gif") no-repeat;

 }

  .invisible {visibility:hidden;} 

The text hiding has to be done on a different tag to the one that displays the background, or the background will be hidden too. So:

  


   
Replaced Text

  

A CSS1 alternative is to use display:none; instead of visibility:hidden;, but this is less friendly to reader software.

• display:none;
  takes no screen space
  
• visibility:hidden;
  takes screen space but does not show

If the CSS height attribute is left out, only as much of the graphic as would show through the height of the text will be displayed. Set it to the height of the graphic.

Alternatives

The above technique for image replacement has 3 drawbacks:

1. you need some meaningless HTML (extra DIV or SPAN)
2. it does not show anything if the user switches off images
3. it cannot be read by screen readers, giving accessibilty problems

There are some alternatives listed at mezzoblue.

The Phark method looks like this:

Replaced Text

/* css */
 #replaced {text-indent: -5000px; background: url(ReplacedText.gif) no-repeat; height: 57px;}
/* html */
 
Replaced Text

Note that adding a title to the tag gives the effect of having ALT text - nice for accessibility.

CSS to replace text with an image | unverse.net | _ | Amazon.com | Amazon.co.uk |