• 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


Yellowstone Angler

Nashville Rotary Club

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
Nicole Ichtertz 2 weeks ago
Everyone I worked with at Gecko Designs answered all my emails and questions promptly, and helped me rebuild and re-design my website with enthusiasm and efficiency. I highly recommend them, they are an awesome team to work with!
5
Hannah McDaniel in the last week
Gecko exceeded our expectations in every way with their efficiency, creativity and professionalism...our non-profit hasn't had a fully functional site that we are proud of in years, and not only did Gabe, Grace & the staff at Gecko completely turn this around, they helped us learn along the way. Thank you!
5
Allen Ratta 7 months ago
These guys are amazing! Gabe knew exactly where to go in the code and want to fix and had all our issues repaired in minutes! As a previous owner of a software company I would give them the highest rating possible!
5
Sprinkler Maniac 7 months ago
Had some updating issues with our website and Gabe provided an expedited response to our situation so we could keep the site up and running smoothly. Additionally, he tweaked a few things he noticed weren't correct so the site would have better SEO. Thanks so much!
5
Rebecca Shoemaker 7 months ago
Gecko is the whole package! Gabe is responsive, reliable, skilled, and affordable. thanks for all your help, i wish i'd found you sooner :)