Image Replacement
As we know for SEO perspective, it is always better to have all the heading in text and format it using the stylesheet to appear the way you want it. But what if you really want to display the heading using image because the need of fancy font or format? Or, may be you want to highlight a banner or image where the keyword or the topic of that banner image you want it to be “indexed†by the search engine.
The answer is using image replacement technique in CSS. Below is the sample code on how to do it:
HTML:
<h1><span>Main heading one</span></h1>
CSS:
h1 {
background-image:url("100192p1.jpg");
background-repeat:no-repeat;
width:170px;
height:111px;
}
h1 span {
position:absolute;
text-indent: -5000px;
}
As you can see we are using regular HTML code for the h1 tag and using CSS to replace the text with an image. Text-indent pushes the text 5000px’s to the left, making it invisible to the user.
Another way to do this is by hiding the span object using display: none syntax.
Notes: it is important to set the width and the height of the H1 to be equal or greater than the image size that is going to be displayed.
Cheers 
