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

Gecko Designs
523 N Higgins Ave
Missoula, MT 59802

Phone:
(406) 662-1123

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


Written by Gabriel on January 18, 2010

dw-tut-h1-start

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.

dw-tut-h1-sample

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:

dw-tut-h1-prop

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.

dw-tut-h1-rule

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”.

dw-tut-h1-bg

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.

dw-tut-h1-size

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.

dw-tut-h1-indent

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.

dw-tut-h1-end

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


Greef Law

Oxbow Cattle Company Product Sticker

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


Phone:
(406) 662-1123

5
523 N Higgins Ave, Missoula
5
5
Michelle Levitus 5 months ago
Gecko Designs was a pleasure to work with while building out a brand new website. They understood what we were after and had creative and useful ideas to help us reach our goals for the website and for our organization. Communication was friendly and reliable throughout the process and they were available to troubleshoot any issues that arose before we went live, and after. Highly recommend!
5
Eric Halverson 3 months ago
Gabriel at Gecko Designs has proven over and over again that he and his team offer an incredible product to their clients (me!). I've been thrilled by his communication, the products they offer, and their responsiveness to my requests. Anyone looking for a website, logo, etc.. would be making a no-brainer decision to do business with Gecko Designs.
5
Martin Judnich 7 months ago
From intro meeting to final website, this was a great experience. Gecko created exactly what I was looking for, and was very timely and affordable. Great collaboration, lots of changes, and they made me feel comfortable every step of the way. I could not recommend more.
5
Lincoln Mansch 10 months ago
Our non-profit organization can't find enough adjectives to describe the top-notch, professional, and amazing work Gabe and his team provides. They have been amazing supporters of our organization from answering simple quick questions, to volunteering at our events, to helping us with graphic designs and website updates for our biggest event, to helping us with the mother of all projects....redesigning our very outdated website. We are always amazed at how quickly and efficiently they work despite us coming back with little nit-picky changes and requests. We often wonder if we're their only client because they are so quick to respond....but that is exactly how they want you to feel - as if you are their only/most important client. They are always willing to do whatever it takes to get the job done right by taking very careful consideration of their clients' needs, wants, and desires, and end up producing work that is nothing short of brilliant.
5
Jaycie Loney a year ago
Gabe and his team did a great job helping us with our fundraiser. They were the most affordable, easiest to work with place in town! We couldn't have been more pleased with these guys!! Highly Recommended!