You’re reading an article by Jay Robinson, a designer living in California.

My Preferred Image Replacement Technique

There are many dif­fer­ent kinds of image replace­ment tech­niques exhaus­tively detailed around the web. Many seem quite com­plex, and dated, and it seems that the most pop­u­lar tech­nique I see is the Farhner method, or text-indent: -9999px. How­ever, there is a small prob­lem with this tech­nique: in Fire­fox it draws lines stretch­ing across your screen nearly 10,000 pix­els to the left.

My pre­ferred tech­nique for image replace­ment on head­ings or links:

#myID {
    background: url(myImage.png) no-repeat;
    height: ...;
    width: ...;
    text-indent: 150%;
    overflow: hidden;
    white-space: nowrap;

This works much bet­ter than the Farhner tech­nique. It won’t draw a dot­ted out­line all the way across the left side of your page. It’s also much more future-proof con­sid­er­ing the vast screen dimen­sions we’re likely to use. (Just imag­ine look­ing at some of your web­sites on a dis­play with 16,384×12,288 res­o­lu­tion. All those words that were pulled 9999 pix­els to the left would be visible.)

Though I’m not sure what to call this method—I’ve never seen this doc­u­mented any where— I remem­ber I first learned it by study­ing Tim Van Damme’s CSS. Before and after exam­ples below. H1 image replacement using the Farhner method H1 image replacement using the hereto for unnamed method

Short URL: