CSS Image replacement technique

It is always advisable to use regular HTML markup to display text, rather than using an image. Doing so allows user a faster download speed and has accessibility benefits. However, if you are using a certain font and your site visitors are unlikely to have that font on their computers, then really you have got no choice but to use an image.

Say for example, you wanted the top heading of each page to be ‘Buy Now’, as you are a seller and you would like to be found for this phrase in the search engines. You are pretty set on it being an obscure font so you need to use an image:

<h1><img src="widget-image.gif" alt="Buy Now" /></h1>

This seems OK but there is strong evidence to suggest that search engines do not assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:

<h1 id="buyImg">Buy Now</h1>

Now, this obviously won't use your obscure font. To fix this problem place these code in your CSS document:


#buyImg
{
background: url(widget-image.gif) no-repeat;
height: image height;
text-indent: -2000px;
}


Be sure to change "image height" to whatever the height of the image is (e.g. 85px)! The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 2000px to the left of the screen thanks to our CSS rule.
Warning: this can cause accessibility issues as any user who has turned off images , won't be able to see the text.