Image Replacement using CSS

November 21, 2007 • 4 comments

Most web designers have all used one sort of image replacement technique somewhere. (This blog uses sIFR for the title) However the most common method for image replacement is the Revised Phark Method. This method still allows for semantic XHTML code and is accessible to screen readers.

The technique is quite simple, you use the text-indent CSS property and indent your text negatively so far off the screen it doesn’t show up. Designers have come to adopt -9999px or -9000px. This value insures that if you have a right aligned header and the site is being displayed on a large monitor, your text will still be pushed off screen.

Using this method you can put push your text off the screen and replace it with an image or logo and still have semantic and accessible XHTML. Of course you can also link it so that it returns to your home page as is generally practiced.

<h3 id="header">
	Company Name

In the CSS you want to make sure that you define a width and height for the image, otherwise the element will colapse onto itself.

/* css */
#header {
	text-indent: -9999px;
	background: url(logo.gif);
        width: 300px:
	height: 25px;

This code shows how you can replace an <h1> tag with an image, yet keeping the <h1> visible to screen readers and search engine robots. However Firefox creates slight problem with links. Theres a thin dotted outline around the tags. Ever since version 1.5 Firefox has started to include the -9999px indention, so the border goes to the far left of the screen at when the link is clicked.

In the next entry we’ll see how to get rid of the dotted line border on the links in Firefox.

Tags: , ,

4 Responses to “Image Replacement using CSS”

  1. July 8th, 2010 12:29 am superman

    good one!

  2. July 8th, 2010 12:39 am superman

    very good

  3. November 8th, 2010 11:26 pm Hem

    search engine will possibily block /mark you as spammer as it is very old heck to make the text invisible for screen reader

  4. May 27th, 2019 4:19 pm Anibal Gradilla

    Youre so cool! I dont suppose Ive learn anything like this before. So good to find someone with some authentic thoughts on this subject. realy thank you for starting this up. this web site is something that’s needed on the net, somebody with a bit of originality. helpful job for bringing something new to the internet!

Your 2 cents: