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%;
}
Eugene says
Now everyone is talking about the American economy and eclections, nice to read something different. Eugene
Branson Computer Repair says
Hi. Thanks for the article. Are these H1 imag replacements SEO friendly?
larzini 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.
Lars says
Just what I needed thx.