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%;
}

Comments

  1. Eugene says

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

  2. says

    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.

Leave a Reply

Your email address will not be published.