• This field is for validation purposes and should be left unchanged.

Gecko Designs
523 N Higgins Ave
Missoula, MT 59802

(406) 662-1123

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

Written by Gabriel on January 18, 2010


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.

Posted in Adobe Dreamweaver CSS

Leave a Reply

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Featured Clients



Take the first step

Questions? Give us a ring, shoot us an email or send a homing pigeon our way. Let’s get the ball rolling! We can’t wait to hear from you!

Gecko Designs, LLC
523 N Higgins Ave
Missoula, MT 59802

(406) 662-1123

523 N Higgins Ave, Missoula
Avi Kolko 2 months ago
Gecko built us a new Unity Hospice website from the ground up, as well as designing new brochures and other collateral material. Working with them has been a pleasure - they are professional, organized, responsive, aim to please, and are easy to work with. Their design work is beautiful, and they really took pains to understand the look we were going for. Highly recommended!
Avigail Bass 4 months ago
We redesigned a very very old website with Gecko and began the process during coronavirus. Despite those challenges, the team at Gecko was very helpful and flexible. They built us a beautiful website, taking into account all our needs. The project manager Grace, was a pleasure to work with, always available to answer questions, great with communication, and very organized. They went above and beyond to make sure the end product was perfect, even if it meant putting in extra hours, or extending the project longer than anticipated. We really appreciated all they did for us and could not be happier with the results!
Craig McKay 5 months ago
Gecko Design staff was super easy to work with. They were able to help us create an incredible web site that is getting noticed. I would highly recommend Gecko to anyone looking for web design.
Courtney Firak 8 months ago
Working with the team at Gecko Designs has been fantastic! I worked closely with Ali to create a new meetings website and she was so patient with all the changes to copy and took the time to walk me through the back-end of Word Press. I am confidently making changes on own but know that any request will be done quickly. The team was even very responsive over a weekend to meet a deadline. Highly, highly recommend!
PHC Missoula 9 months ago
Gecko's team does great work. We had a fairly complex request with a variety of stakeholder interests at play. Their team listened carefully and responded thoughtfully to our needs throughout the process! We were very pleased with the process and thrilled with the final product they provided.
We’ve been working so hard making our clients look good, we neglected our own brand for quite a few years (25 to be exact...)! New look comin’ at ya Spring 2021! Has it been awhile since you’ve re-branded? We get it! Call us and we can help! (406) 662-1123