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.


  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#


    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 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('');
        color: transparent;
        display: block;
        height: 240px;
        width: 240px;



Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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