Using image replacements in a CSS driven site is becoming a very common practice. SEOmoz uses it all over the place – if you view the source of our homepage you’ll see:

 

   

What is SEOmoz?

  <p>
SEOmoz is a Seattle based search engine optimization company.   
We provide SEO / Web Marketing ...
p>

  

The result in the actual website is that very pretty image of a flower with a gradient background.   This is done by simply adding a background image to the div tag and hiding what’s inside the span:

#what_is_seomoz h1 { background: url(/some/background/image.gif) no-repeat; }

 #what_is_seomoz h1 span { display: none };

The result is cleaner, more semantically correct code.  My question is this:  Do search engines treat sites with CSS image replacements any differently?

This technique could easily be abused to stuff a bunch of keywords all over the site while displaying something completely different to the user. I’ve heard that the major SEs will often look for ridiculously high margin settings to try and detect this kind of thing (setting: margin: -999px for example, would render text off the page). Will they soon start penalizing sites that use display: none inside of nested elements?

On the flip-side,  this technique should result in pages that are well optimized for spiders.  It affords you the opportunity to use html tags with semantic meaning and therefore spiders should be able to break the page down more easily (and decide what’s-what on the page).