Grow your CSS skills. Land your dream job.

Last updated on:

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.

Comments

  1. Permalink to comment#

    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.

  2. Mickey
    Permalink to comment#

    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.

  3. Permalink to comment#

    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

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

    • One example: You can change the wordpress blog title text (it´s normally a h1 tag) with your custom logo image without coding in php. In other way you can hide your logo for screenreaders.

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

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".