Dreamweaver Tutorial: Use CSS to replace HTML text with an image

CSS Image Replacement Using Dreamweaver

Search engines place great emphasis on the words shown in a documents’ headings (Heading 1, Heading 2, Heading 3, etc). For that reason we try to place important keywords and phrases into these headings. Unfortunately, there are only a dozen or so web-friendly fonts that we can use and safely assume that all browsers will display correctly. Herein lies our problem. We want to place important keywords and phrases in headings, but we don’t want to be limited by what are considered web-friendly fonts.

The image at right shows a default Heading 1 with a paragraph below it. Our goal is to replace that web-friendly font with the custom image below that was made in Photoshop. Save it to your own computer and use it to try out this technique yourself. It is 472 pixels wide and 26 pixels tall.

Why not place this image inside of a heading?
Search engines and vision-impaired users are not able to interpret images. We always describe images with alternate text but alternate text in an image has very little search engine value, even if the image is inside of a heading.

The Trick Using CSS

The solution is to create a heading just as your normally would and then apply special CSS rules to that heading that hide the text and replace it with a cool image. Here’s how it works:

Step 1: Name Your Heading
Create a heading and give it an ID. The ID can be anything that makes sense to you. I’ll call mine “heading-minivans”. Our heading needs to have an ID so that we can target this specific heading with CSS instead of affecting all headings on the page.

Step 2: Create a New CSS Rule
Create a new CSS rule for the ID you created – in this example the rule will be for the ID called “heading-minivans”.

Step 3: Add a Background Image
The first property we will apply to this CSS rule will be a background image. Note that the image will tile (repeat) horizontally and vertically. In the next step we will correct this.

Step 4: Define the Size
Next, we will assign a width and height in order to display the background image properly without tiling or appearing cut off.

Step 5: Hide the Text
Our final step will be to hide the HTML text that is shown on top of the background image. We can do this easily by using the text-indent property in a tricky way. In the Block category of your CSS Rule definition dialog, set the Text-indent property to -9999 pixels. This will position the HTML text 9,999 pixels to the left of the screen which will place it completely off screen.

CSS Image Replacement

The finished product is a heading that search engines and visually-impaired users can interpret that looks cool and isn’t limited by web friendly fonts. Because the heading contains HTML text, it has all the search engine benefits that come along with placing keywords into headings.

Taking it Further

A great way to use this trick is to create buttons that change when you hover over them without creating a traditional JavaScript-based Dreamweaver rollover image. Try creating a link, give it an ID and replace it with a background image using the CSS technique above. Then create another CSS rule with the same name adding :hover to the end. Change the background image for this rule and presto! A CSS-driven roll over button that search engines and vision impaired users can interpret.