Design: CSS Websites

CSS Image Replacement is a web design technique that calls a logo or specific image via the CSS stylesheet, while hiding some text behind it on the web page.

The normal code for a logo would look like this:


Using the CSS Replacement technique, first you would create a CSS class that would look like this:


And then you would call the logo on the web page with the following code:


The visual result would be the same in both cases, but with the CSS Image Replacement you would have the 'logo name' text hidden in the page.

Why? Why Not?

Why did people started using this technique? Mainly because it makes the logo more accessible. Search bots, for example, will be able to know what it is about (they can read text, but not images).

Why there is some controversy regarding this technique, though, if it makes the web design more accessible? Simply because it can be exploited for SEO purposes. Hidden text is a very old SEO trick, and today most search engines penalize it.

CSS Image Replacement in theory is a legitimate reason to hide text, but it is not always clear if Google and the other search engines are fine with it.

What Does Google Say?

Matt Cutts, who is head of Google's Web Spam team, once wrote:

If you're straight-out using CSS to hide text, don't be surprised if that is called spam. I'm not saying that mouseovers or DHTML text or have-a-logo-but-also-have-text is spam; I answered that last one at a conference when I said 'imagine how it would look to a visitor, a competitor, or someone checking out a spam report. If you show your company's name and it's Expo Markers instead of an Expo Markers logo, you should be fine. If the text you decide to show is 'Expo Markers cheap online discount buy online Expo Markers sale '' then I would be more cautious, because that can look bad.

So according to him it depends on how you use the technique. He does mention that it can be a reason to get your website flagged for spam though.

Who Uses It?

Apart from checking what people are saying about it, it would be nice to see who, among the SEO experts, is actually using the technique, right?

Rand Fishkin from SEOMoz seems to be a big proponent of that. He uses CSS Image Replacement on the logo of his popular website, and he also wrote a post once defending the idea behind it.

Aaron Wall from SEOBook, on the other hand, does not use it.

Wikipedia seems to be using CSS Image Replacement, while Google does not use it on any of its properties.

What Do You Think?

Do you think that CSS Image Replacement could cause SEO problems to a site using it? Obviously we are considering a site using it legitimately, and not abusing it. Let us know what you think and leave a comment.