Sep
18
2008

CSS Image Replacement for H1 tags

I found a great new way to do this. The classic way is to text-indent -9999 pixels. It seems to me that the search engines, especially Google will be catching on to this method soon enough. I’d rather not be among the few still using this method when the ball drops on it.

I found it here at Mezzoblue. It’s the last one on the page, Shea Image Replacement.

http://www.mezzoblue.com/tests/revised-image-replacement/

What style the span to take up all of the space and have the background image. This effectively shoves the text out of view.

Here is the code excerpted from MezzoBlue:

code:
<h3 id="header" title="Revised Image Replacement">
<span></span>Revised Image Replacement
</h3>

/* css */
#header {
width: 329px;
height: 25px;
position: relative;
}
#header span {
background: url(sample-opaque.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}

Share and Enjoy:
  • del.icio.us
  • digg
  • Furl
  • NewsVine
  • RawSugar
  • Reddit
  • Spurl
  • YahooMyWeb
Written by Tom in: Uncategorized |

4 Comments »

  • Eugene

    Now everyone is talking about the American economy and eclections, nice to read something different. Eugene

    Comment | October 22, 2008
  • Hi. Thanks for the article. Are these H1 imag replacements SEO friendly?

    Comment | November 17, 2008
  • Any recommendations on how to add the SPANs within the H1 in WordPress? I’m looking to replace the blog name which WordPress places within the H1 with this technique. Thanks.

    Comment | December 20, 2008
  • Just what I needed thx.

    Comment | January 30, 2009

RSS feed for comments on this post.

Leave a comment


× 6 = eighteen

Powered by WordPress | Aeros Theme | TheBuckmaker.com WordPress Themes