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.
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.