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.


  1. Sunny Singh
    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#


    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. Jon Stuebe
    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. GlitchMr

    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.

    • Dietmar Krause
      Permalink to comment#

      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. Laurence Powell

    I love this technique however when somebody views my site 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?


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


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



Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.