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.
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.