A little dab'll do ya
Code Snippets
Standard CSS Image Replacement
h1#logo {
width: 200px; // width of image
height: 100px; // height of image
background: url(../path/to/image.jpg);
text-indent: -9999px;
}This technique is credited to Mike Rundle and referred to as the Phark Method. There are many more techniques for CSS Image Replacement.
I love this technique as it doesn’t require any spans and works perfectly. Also when you try to select the background image it doesn’t move in Firefox unless it’s a link which is nice.
I think CSS should include some sort of text replacement property though as this still seems more of a hack.
Hello,
I used this technique, but I noticed a small issue in Google Chrome: the text-indent made the element grow in width by 9999px. So I had to add “overflow: hidden” to the CSS.
I love this text replacement, but I always like to used em’s instead of pixels just to make sure this text is nowhere near the window, and I agree with @mickey about overflow: hidden