Sep
18
2008
4

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

Written by Tom in: Uncategorized |

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