Code Snippet
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
Why not just use simple HTML4?
<img src="../path/to/image.jpg" width="200" height="100" alt="Image replacement">No more tricky hacks. HTML4 is awesome.
I love this technique however when somebody views my site http://www.commercial-london-epc.co.uk/ on a smart phone the text overlays the background image. I was wondering has anyone else found a fix for this yet? Another drawback I’ve noticed is that a lot of people try to click the header intuitively to navigate back to the home page.