SIR Image Replacement
July 10th, 2006
CSS techniques for replacing text with an image have been around for a few years, allowing web designers greater options for styling text on a page. Early approaches turned out not to work as expected with Screen Readers, making the text less accessible than normal. In response, a variety of different approaches have been suggested—many involving extra span tags, lengthy CSS, or both.
Here’s my suggestion for an Image Replacement technique that’s accessibe, requires no additional HTML tags, and uses a tiny amount of CSS.
Stuart Robertson
Pretty slick! I’m still comfortable with the Phark method, but once IE7 is released, this might be a viable option. Good work!
Also, Dave Child published a similar technique using
:before.This is a great tip to use with site logos..
hmmm, even better:
Ye Replaced Text
Css:
h1 #sir {
height: 0px;
padding: 25px 0 0 0;
overflow: hidden;
width: whatever….
background: url(path to image.jpg);
}
For IE7.css:
h1 #sir {
height: 25px.
}
Works like a charm.