The image above replaces the text of an h1 tag. This CSS technique is common for replacing text with image. Thus, the text remains accessible to screen readers and search engines, and aids in creating understandable, semantic markup. But, users see a nice image instead of the text. This is often used for company logos, page headers, etc.. Turn off the CSS and you will see the text of the H1 tag instead.
HTML
<h1 id="header">Replace This Header Text</h1>CSS
#header {
text-indent: -9999px;
height: 15px; /*set the height to the height of the image*/
background: url(images/replace.gif) no-repeat; /* set the backround to the image and make it so it doesn't repeat*/
}
If using this for a logo, you may wish the logo to link back to the homepage. Thus, to make the image clickable (and even respond as a rollover), you'll need to add some CSS to modify the <a> tag so that it displays a block and has the appropriate width.
HTML
<h1 id="header-link"><a href="http://karlcleveland.com">Replace This Header Text</a></h1>CSS
#header-link {
text-indent: -9999px;
height: 15px;
background: url(images/replace.gif) no-repeat;
margin-bottom: -5px; /*you may need to adjust the margin to align the text and header properly*/
}
#header-link a {
display: block; /*if you want the image that is replaced to continue to work as a funcitonal link, add this*/
width: 295px; /*set to the size of the image or else the block will continue all the way across the page*/
}
#header-link a:hover {
background: url(images/replace_over.gif) no-repeat; /*you can even make the image have a rollover effect*/
}
View the Source Code for Sample CSS.
More information about Image Replacement Techniques: