There are a few techniques that are being used out there for CSS Image Replacement such as:

1. display:none; hides the text from the CSS. Then what is the point?
2. left:-5000px; pushes the text to the extreme left, outside of the screen. While it is still on the page, it is not entirely sure that search engines won’t ignore it thinking you are hiding a bunch of text.
3. The “alt” tag within the image. Necessary but not a solution in itself.

None of them are SEO friendly, clean and legit. Here is a fourth one which happens to also be used by Google. You will place your image after the text you are replacing and give the image an absolute position.

Here is the code that I applied to the h2 in the right rail of the ubenice.com homepage in early 2010.

First the html:

<h2 class="hdr">
   Photos
   <img alt="Send Us Your Photos" src="_images/h2-photos.gif">
</h2>

Then the CSS:

.hdr {
   height:65px;
   margin:0;
   width:250px;
   position:relative; /*this is important - there has to be a relative element somewhere above*/
}
.hdr img{
   left:0;
   position:absolute;
}

Finally, if the image is not correctly positioned, you can adjust it by playing with left:Xpx; and/or adding top:Xpx;.

Let me know how this technique is working out for you and if you have any questions!

UPDATE on Sept 23 2010: James below is asking proof that Google uses this technique. Let me show you their code (I am using the code that’s around the logo on any search result page – upper left corner, next to the search box).

The HTML first:

      <a id="logo" title="Go to Google Home" href="http://www.google.com/webhp?hl=en">
         Google
         <img width="178" height="238" alt="" src="/images/nav_logo16.png">
      </a>

The CSS:

#logo{
    display:block;
    height:62px;
    margin:3px 0 0 2px;
    overflow:hidden;
    position:relative;
    width:178px;
}

#logo img{
    border:0 none;
    left:0;
    position:absolute;
    top:-145px;
}