The Problem:

You have a heading or subtitle and would like to display a fancy image rather than boring text. But you would like to keep the text in your page so that search engines and screen readers can still figure out what your article is about.

The Solution:

This article describes how to use css to replace text with an image. This technique was first introduced as the "Fahrner Image Replacement" (FIR). The FIR method has some limitations, so I will demonstrate how to use an adaptation of the FIR method that was written by Douglas Livingstone. Read more about this technique here.

Step 1:

Write the html markup for the heading or subtitle text you'd like to replace. For example, the first paragraph of this article begins with the words "The Problem". Here's the html markup:

<h1 class="subtitle" id="theproblem"><span></span>The Problem</h1>

Step 2:

Use a smashup to generate a image to use to replace the text. For example, I used the "Simple Text" smashup tool to generate the following image:

Step 3:

Include the following css rules once to your page so that text inside h1 tags will be hidden behind images.

h1 span {
display: block;
position: relative;
z-index: 1;
}

/* IE5 Mac Hack \*/
h1 { overflow: hidden; }
/*/
h1 { text-indent: -100em; }
/* End Hack */


Step 4:

Add the following css once for each heading you want to replace. Change the url to match the image you want to use. Change the width, and height to match the image's width and height. And change the margin-bottom to match the negative of the image's height. For example, this code snippet shows how I replaced "The Problem" with the image shown above:

#theproblem, #theproblem span {
width: 300px;
height: 75px;
background-image: url(http://www.smashupgraphics.com/files/smashups/p/1360/smashup_custom_text.gif);
background-repeat: no-repeat;
}

#theproblem span { margin-bottom: -75px; }


Now go generate some text images and change those boring headings!