This CSS technique is generally used to replace a piece of text with a graphical representation of that same text. The desired outcome is the effect that the text contained in the graphic image gets indexed by a search engine AS TEXT.

It’s sort of a not so white-hattish thing to do because it’s usage is deceptive even though when used correctly it really serves a good purpose. My perspective is that if you don’t abuse it to hide spammy text to get a higher ranking, then there’s nothing wrong with it.

It basically works like this. Here’s an example of your html code:

<div id="articleHeader">This is the header</div>

…and here’s the accompanying CSS code:

space

#articleHeader{
    text-indent:-10000px;
    width:50px;
    height:200px;
    background:url('headerGraphic.jpg') no-repeat;
}

space

Sometimes when you use this inside of floated divs and such you’ll run into cross browser complications but when used simply to replace text with an image it works pretty well.

The confusing and frustrating part of this technique comes when you try to do a bit more with the technique. For instance, if you’d like to create a graphic navigation bar but you want the text which the graphic shows to be fully accessible, you can just style an unordered list like this:

<ul id="ourNav">
  <li><a href="link1.html">Link 1</a></li>
  <li><a href="link2.html">Link 2</a></li>
  <li><a href="link3.html">Link 3</a></li>
  <li><a href="link4.html">Link 4</a></li>
</ul>

space

…and write the style sheet like this:

#ourNav{list-style:none;}
#ourNav li{
    float:left;
    text-indent:-10000px;
}
#ourNav li a[href ^='link1']{
    height:50px;
    width:100px;
    background:url('link1.jpg') no-repeat;
}
...etc...

space

The problem that you’ll find with this is pretty stupid and annoying but basically the link is stretched around the text & since the text is swiped 10,000 pixels off the screen, technically the link goes off the screen as well. It doesn’t seem like the hot spot of the link actually goes off the screen, but clicking the link causes the default browser behavior to display a 1px dotted white outline around the link area which, (since the actual link text has been scooted 10,000 pixels to the left) causes the dotted border to span across the entire site and off the page as well.

For example - click the logo at the top left of the page here:
http://www.blogcatalog.com/

They use this feature so they can get the keywords indexed by SE’s. Actually in this case, Blog catalog is using a graphic which says “Blogcatalog” but the text they’ve replaced is “Blog Catalog, Social Blog Directory and Search Engine” which is kind of deceptive since it’s not exactly what the graphic says.

Overall I think it’s a pretty cool little technique though it has it’s limitations. As I get to know the ins and outs of it a little better I’ll come back and update the post.