There are a lot of reasons that you would want to replace simple text with an image. One of the biggest reasons is the benefit of getting the text that is within the image for search engines. This method is used mostly for site headings. Say you were making a site about “Freelance Oklahoma Web Design” you would want to be sure to include that in your first H1 but you don’t want to use plain text to do it. So you would be creative and ensure that you are getting the same information that is within your fancy image into your heading tag. This way you can ensure that your site topic is best read by search engines without losing any of your design benefits of creating custom imagery for your design comp.

The CSS Image Replacement Technique (often referred to as the Fahrner Image Replacement technique) itself is very simple but it is just understanding the concept to ensure that it is done without properly. The biggest part of using this technique is being able to indent any text that happens within your selector. A lot of people will choose to use H1’s as their focus of indenting the text off of the screen. Such as in the following example.

<div id="logo">

<h1><a href="/" title="Oklahoma Web Designer">Freelance Oklahoma Web Design</a></h1>

</div>

Then the CSS for this technique

#logo h1 {text-indent: -9999px;}

#logo h1 a {width: 150px;height: 75px;display: block; background: url(images/logo.jpg) no-repeat;}

The idea is very simple, as you can see that within the CSS we apply a background image to the anchor tag and indent the text from the H1 tag to ensure that the text is hidden but the background image is shown. This way the logo is clickable and the text will only be seen by text-only browsers or search engines robots. You don’t necessarily have to use this on your heading text/logo. It can easily be used on navigation if you are using image-based navigation.

Popularity: 75%