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.

  6. Josh
    Permalink to comment#

    I am slightly baffled…

    I have been looking around, how to do image replacement these days and found some good articles here on css-tricks, discussing the Ins and Outs of various technics.

    Since all of them basically try playing around with where the text is placed on the page, trying to hide it, I kind of didn’t feel to comfortable with any of them.

    The one technik I came up with myself now, however I haven’t found here anywhere, which I didn’t expect, since it is quite simple.

    Can someone try to clarify, why it could be a bad idea, to use rgba and simply set the text to transparent like this?

    Html:

    <h1 class="title">My Page Title</h1>
    

    Css

    .title {
        background: url('/images/logo.png');
        color: transparent;
        display: block;
        height: 240px;
        width: 240px;
    }
    

    Thx,

    Josh

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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