• 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

Kidney Cancer Association


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
Courtney Firak 2 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 3 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.
Ronald Richker in the last week
The website that was built for us does not work on all browsers. Specifically, the product configurator, the most important part of the website, produces an error on older browsers. Very disappointed and frustrated.
Libby Addington 7 months ago
Gecko brings an immense amount of talent and expertise to any project, adding value and saving us time at every step of the process. We've been blown away by their balance of creative capability (across strategy, ideation, design and execution) with impeccable execution, on time and on budget every time. Can't recommend them highly enough.
Mark Thome 5 months ago
Gecko Designs had us at the lead phrase on their home page: "If you're tired of flakey freelancers and want to work with a team of professional, reliable experts, you've come to the right place!" We were at that point developing our site that we needed to step up to a professional team with a demonstrated portfolio of blue-chip sites, and the expertise to help bring our crazy ideas to fruition. We're looking forward to The Missoula Underground being a vital part of the Northwestern Montana scene, and the first step was picking up the phone and having a conversation with Gabe. Don't hesitate to hire their team, they are ACES at web design and development. Thanks, Gecko!
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 Fall 2020! Has it been awhile since you’ve re-branded? We get it! Call us and we can help! (406) 662-1123