How to Use Gilder/Levin Image Replacement for Headings

Web designers often need special fonts or stylized text in the headings on a web page. Many techniques for doing this exist. This article teaches you how to replace a heading with an image in a way that is accessible and reliable. It explains the "Gilder/Levin" method of image replacement, originally attributed to designers Tom Gilder and Levin Alexander.

Instructions

Difficulty: Moderate

Things You’ll Need:

• A text editor or WYSIWYG HTML editor
• Prepared images to replace the text in your web page headings

1. Both the image and the text are present on the page. The image is over the text. This is accomplished using CSS rules. Before you write the CSS you must write the HTML. To explain it, the example will be an imaginary blog called Nature Talks with Nel. The example will use the h1 in the header, however, the technique works on any type of text.
2. This technique works by putting an absolutely positioned element inside the relatively positioned element. Both occupy the same space on the page. If a user doesn't have the ability to see images, the text is still there.
3. The header div with the HTML to create the span Suppose you wanted to hide the header h1 text with a banner image and the same text as the h1. Insert the h1 in the header normally, but also add an empty span element at the beginning of the h1. The HTML is shown in the image.
4. The #header h1 before the image is added to the span Then you write the CSS for the h1.
   
   
   #header h1 {
   
   width: 900 px;
   
   height: 328px;
   
   position: relative;
   
   }
   
   
   The width and height measurements used in the example above are the exact measurements of the image I'm using. Your numbers will be different. You must have position:relative for this to work. With only the h1 text visible, you see something like this image.
5. The #header h1 with the image added to the span Write the CSS for the span.
   
   
   #header h1 span {
   
   background: url(naturetalksNel.jpg) no-repeat;
   
   position: absolute;
   
   width: 100%;
   
   height: 100%;
   
   }
   
   
   This puts the image (in this case naturetalksNel.jpg) over the h1 text by positioning it with the span. Now you see a header like this image.
6. You can use this technique with just heading text and not a banner-like image and text. The h2 text for the Main Content is shown in the images as still incompleted can be replaced with an image the same way. You could use text such as "Where are the bees?" and replace it with an image of styled text saying exactly the same thing.

Tips & Warnings

• Where some image replacement techniques hide text from both the user and search engines, this technique leaves the text available to search engines.
• This technique depends on a set width and height. If a low-vision user resizes the text to make it larger, the hidden text may show around the edges of the image hiding it.
• This technique is best used in small doses. Stick to decorative headings or small elements so you don't increase the number of images on your page to where the page is slow to download.