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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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.

    • User Avatar
      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. User Avatar
    Laurence Powell

    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. User Avatar
    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

    • User Avatar
      Jayakrishnan
      Permalink to comment#

      I’m using the same way in my project and I didn’t get any issues.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag