Many of us, love to come up with images for our websites with a neat font that we want to use, but when we create an image with information on it, spiders can not render and index that information, therefore loss of effectiveness of the SEO on your website.  Regardless what is on the image there is a way to work with the browser to try to help the spider index the text still and keep your SEO rank in high places. Nothing is ever absolute with SEO but this is a technique that you can approach and try out. This approach enables you to describe the text in your image using the < h1 > tag without using display:none;

Sometimes people want to use:

h1{display:none;}

As a style, but you need to keep in mind that screen readers for the blind do not pick up text that has the property set to display:none;.  The code for this technique is as follows:

h1 {
  width: 100px; /* width of image */
  height: 0;
  overflow: hidden;
  padding-top: 100px; /* height of image here */
  background: url('your-image-path-here.gif') no-repeat
}

Then inside your HTML you could have something like:

Here is the text that describes my image that is used as the background image to this

Well you are probably thinking “well how does this work?” It is actually quite simple. The images will display within the element because you are setting the padding to the height of the image. Note, that the height is set to “0″ and overflow to hidden.

Using this technique you effectively hide text without turning off the display of the text.

So what do you think of this? Remember if you like this, bookmark this!