CSS Image Replacement

The available fonts to a web designer is quite restrictive for making headings and menus look sleek and stylish whilst still maintaining usability and accessibility. We don’t all have the same fonts available, yet that shouldn’t stop us from using our favourite fonts. A lot of designers/developers will simply create the text they want and save it as an image, then place it on the page where they want it eg. a Logo, using an image tag. Everyone can see it in the font the designer intended.

However, this means that you’ve place a presentational image on a web page, which whilst it isn’t strictly a major issue, does go against the reasoning for CSS ie. separating design from content. If you wanted to offer alternate stylesheets then you wouldn’t be able to change this image. There is a technique known as CSS Image Replacement that can do this for us, and allow us to ‘cover’ the text with a design image. We can use this easily then for headers, for list items used in menu navigation, or even for inline elements such as links.

The HTML

So first of all we need to look at our HTML. Usually this could be something such as:

<h1>Some Wonderful Company</h1>

However, we would rather display our logo instead of the text. So to do this we first need to add an additional span in, which is there to give us something to target with the background image. So we insert this before the text ie.

<h1><span></span>Some Wonderful Company</h1>

That’s all we need to change in our HTML.

The CSS Code

This is where the magic happens! First we need to specify the CSS for our h1 tag. We need to set the height and width of the h1 to be the same size as our image. So, if we use the Blogging Tips logo to be our image, the dimension of this is 472px wide by 77px high. One other setting we also need to make is to set the position property for the h1 to be relative. This should not affect the h1, but it allows us to then properly position the span (which you’ll see lower down), which would otherwise be uncontrollable. So our CSS for the h1 is

h1 {
    height: 77px;
    width: 472px;
    position: relative;
}

Now we need to style the span instead the header. The span needs to have the image set as a background of it, it needs the same dimensions as well, ie.

h1 span {
    background: url(/wp-content/themes/BloggingTips/images/logo.gif) no-repeat 0 0;
    width: 472px;
    height: 77px;
    position: absolute;
    top: 0;
    left: 0;
}

We’ve had to set the height and width on the span as well because it has no content in it, and it would collapse otherwise, and not display the background image. Then, using absolute positioning and setting the position coordinates to 0,0 (top and left) places the image in the correct place over the text. If we didn’t use absolute positioning then in most browsers it wouldn’t appear.

This gives us then a final example as follows (note inline styling has only been used to give this example, as always, we recommend an external stylesheet should be used).

<h1 style="height: 77px; width: 472px; position: relative;"><span style="background: url(/wp-content/themes/BloggingTips/images/logo.gif) no-repeat 0 0; width: 472px; height: 77px; position: absolute; top: 0; left: 0;"></span>Blogging Tips - Take Your Blog To The Next Level</h1>

And this gives us:

Blogging Tips – Take Your Blog To The Next Level

Inline Elements

If you wish to use image replacement on an inline element such as a link, then you need to set the inline element to display: block. This is not usually recommended for most inline elements, as they’re designed to be inline (eg. a span in the middle of a paragraph of text), however there are exceptions to this, such as if we wanted to link our text and logo in the header above.

So we would have our text and span linked within the header tag ie.

<h1><a href="/"><span></span>Blogging Tips - Take Your Blog To The Next Level</a></h1>

Then in our CSS we would set the anchor tag to display block, and we would also set the cursor property to be a pointer, so that when the user hovers their mouse anywhere over the image it will change to a hand. Finally we’ll also remove any text decoration so that the image does not get a border ie.

h1 a {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

Also, you may still like to have the little tooltip that pops up when users hover their mouse over your image. This simple effect is still achieved by using a title attribute on your link, or on the header if there isn’t a link being used.

The Final Code

This then gives us the final code of

CSS:

h1 {
    height: 77px;
    width: 472px;
    position: relative;
}
h1 span {
    background: url(/wp-content/themes/BloggingTips/images/logo.gif) no-repeat 0 0;
    width: 472px;
    height: 77px;
    position: absolute;
    top: 0;
    left: 0;
}
h1 a {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

HTML:

<h1><a href="/" title="Return to the Blogging Tips Front Page"><span></span>Blogging Tips - Take Your Blog To The Next Level</a></h1>

The main drawback of this method is that if your image used is transparent then the text underneath will show through. If you want to look at other methods available then I highly recommend Dave Shea’s Revised Image Replacement

Written by Sarah from Stuff By Sarah
Posted on April 2nd, 2009 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

61566http%3A%2F%2Fwww.bloggingtips.com%2F2009%2F04%2F02%2Fcss-image-replacement%2FCSS+Image+Replacement2009-04-02+20%3A00%3A30Sarahhttp%3A%2F%2Fwww.bloggingtips.com%2F%3Fp%3D6156