Easy CSS Image Replacement (Phark)

For people that care (and we should care), keeping the semantical integrity of your HTML document, while being able to create great design using images, has always been an important part of web design and development.

An increasingly popular technique is an Image Replacement techniques with CSS. This makes sure text browsers and Search Engines can read you text (great for SEO), while replacing them with images. This is simply a technique where your HTML text is being replaced with a graphic. There are many uses for this, most people use it for headers, I like to use it for any non-text graphical element my designer will come up with.

Here's how it works: I add a text link, apply a background image through CSS, and then use a huge negative text indent to hide the text and only show the background image.

Give me feedback on this page/code

Example

Let's say I create a neat little button on a website that is supposed to link to my 'specials' page. I dabble a little in Photoshop and come up with this: checkout (13K)

The easy way of doing this is to add the image and put an anchor tag around it, linking it to the specials page. But wait.. we want to use text so look at the following example where I use the image as a background instead of using the image tag:

HTML


				<a href="specials.html" id="specials">Check out our Specials!</a>

This is simple HTML and we're adding an ID attribute so we have a CSS hook to use for styling.

CSS


#specials {

height: 88px;

width: 180px;

display: block;

border: 0;

text-indent: -9999px;

background-image: url(assets/specials.gif);

}

CSS Mission Accomplished

The 'text-indent' hid the text and the width and height makes sure the anchor tag is the correct size. It's as Easy as A-B-C

I use this technique all the time. It's easy, practical and makes sense in relation to web standards.

This technique was conceived by Mike Rundle and is called the Phark Method.