Pin Me

Simple Image Replacement with CSS

written by: Waleed Zuberi•edited by: Michele McDonough•updated: 11/30/2010

Image replacement is great a way to increase the visual attractiveness of your website while maintaining its accessibility and search engine visibility. This article introduces you to the concept and will also present two easy and useful techniques to accomplish it with CSS.

  • slide 1 of 6

    Image Replacement 101

    You might have heard of ‘image replacement’ (IR) as a way to replace text in a webpage with an image by use of Cascading Style Sheets; for example, replacing an <h1> text heading with a stylized logo. You may want to include the company’s name as actual text for SEO benefits, but ideally you would want it to be displayed as your logo mark, not un-styled text. (Click image for a larger view.)

    EA Sports demo 

    This way, the content remains accessible to search engines and screenreader software while providing a more visually attractive page to other users.

    There are several methods to achieve this; some rely on extra <span> elements, some on JavaScript and some on Flash. Unfortunately, there is no perfect solution and each has its own drawbacks and advantages depending on the use-case. In this article we’ll be taking a look at two simple techniques which will, by and large, cover most situations you may encounter as a standards-conscious web developer.

  • slide 2 of 6

    The Concept

    The original technique, known as Farhner Image Replacement (FIR) was described by Doug Bowman way back in 2003, and while it still stands today, it is not recommended for use because of issues with screenreaders and search engine robots. It is useful, however, in understanding what the concept of image replacement proposes.

    As we know, IR basically replaces an HTML element with a background image with CSS. For example,


    <a href=>EA Sports</a>



    h1 {

    background: url(ealogo.png) no-repeat;

    height: 90px; width: 90px;


    h1 a {

    display: none;


    The CSS applies our stylized logo as the background image of our <h1> tag and hides the text in the link. The page therefore shows the logo image instead of the plain text when rendered. The inner element (in this case an <a> tag) could be anything else of course – for example, a <span>.

    That is the basic concept. However, as stated, the code above is generally not recommended.

  • slide 3 of 6

    Phark Method

    The Phark method was developed by Mike Rundle and is arguably the most popular technique in use today. Instead of using display: none; to hide the text, we simply push it off the page with the CSS property text-indent. So with the same basic HTML as above, the CSS becomes

    h1 {

    background: url(ealogo.png) no-repeat;

    height: 90px; width: 90px;


    h1 a {

    text-indent: -9999em;


    The negative text-indent pushes the text outside of the viewable portion of the page, and while it is still there, it is essentially invisible to the user.

    The added benefit of this technique is of course that it eliminates the issues with screenreaders and search bots. Moreover, it does not require the use of the inner element as FIR does so our HTML could simply be

    <h1>EA Sports</h1>

    It would still work without the extra markup.

    The one disadvantage with the Phark method is that it would not work if your visitor has images turned off in their browsers. In that case, the text would ‘disappear’ but the background image to replace it would not load, thereby leaving that space empty and inaccessible. This is of course, something you may choose to live with depending on the audience of your website, but it is one thing to keep in mind when using the Phark method.

    Head over to the next page to see the next technique.

  • slide 4 of 6
    CSS Image Replacement: An Alternative MethodAn alternate method of CSS image replacement. Continuing the article on using CSS and background images for semantic, accessible and SEO image replacement
  • slide 5 of 6

    Image-on-Top Method

    Credited to Levin Alexander, this technique solves the issue of content becoming unusable with CSS on and images off. Instead of hiding the text or moving it off the page, we simply place the image on top of the text.

    The HTML:

    <h1>EA Sports<span></span></h1>

    You’ll notice the extra <span></span> tags after the text inside the <h1> element, which is an unfortunate requirement of this method.


    h1 {

    width: 90px; height: 90px;

    position: relative;


    h1 span {

    background: url(ealogo.png) no-repeat;

    position: absolute;

    width: 100%;

    height: 100%;

    overflow: hidden;


    The empty <span> element is positioned absolutely over the text, given the image as its background and overflow is hidden so that the text does not peek through from the sides.

    Transparent images cause ugliness Of course, you may have also realized that this technique would not work with transparent images, as the text behind them would show through. Unacceptable ugliness!

    If your image is opaque, however, this technique is arguably better than the Phark method since it doesn’t break the website in the elusive CSS on, images off situation.

  • slide 6 of 6

    Which Is Best?

    Unfortunately, there is no perfect solution to this problem. Which method you choose to implement depends on your specific requirements for the website you’re building. If you don’t believe any of your visitors would have CSS on but images off, or have transparent images then go for Phark; if you want to make sure content remains accessible in all cases, or are okay with the extra markup then the Image-On-Top method is the way to go.

    There are other methods, of course. For example, there’s sFIR if all you want to do is replace fonts, which involves the use of Flash. There are also JavaScript and jQuery implementations you might choose. However, the techniques showcased above should cover you for most cases.