CSS image replacement techniques

Written by: Emanuel Blagonic

Published on: October 21, 2006

When you are engaged in web design process, one of the most helpful things is CSS image replacement technique. In this article, I will show you the basics you should know for replacing text with images. I will show you how to use a logo for Heading 1 (which is widely used for displaying company logo), how to replace different headings, and the last but not least – how to use this technique to display engaging and beautiful navigation.

Replacing headings

Image replacement techniques are widely used for replacing headings. Here, on EmanuelBlagonic.com I am using this technique to replace both Heading 1 and some of Headings 2. It’s not very difficult. Here is the code we will use.


<h2 id="heading-2" class="image-replacement">Heading 2</h2>

The trick when replacing the heading 2 is to indent a text by 8000 px (it could be any value in fact, but I use this one) so it don’t shows up when we use a background image for replaced heading. While indenting the text by 8000 px we stay assured that it won’t POP up on higher screen resolution. Let take a look at the code.


h2 .image-replacement {
	text-indent:-8000px;
	height:40px;
}

Because headings are displayed as block (you must know that by know if you are a regular here :), the will display to the 100% of the parent DIV, so we don’t have to define width for them. Because our background picture is 40px high, we will define height of 40px. I used a class .image-replacement so I can group the headings. If you have just a few heading you don’t have to use a class at all. And now we will replace the background of the parent DIV with our custom background (heading-2.gif) like this.


#heading-2 {
	background:url(art/heading-2.gif) no-repeat;
}

Heading 1

I prefer to have only one Heading 1 on the page. This method is used for displaying company logos, and the logos are used to create a backward link to the homepage. In heading 1 we don’t even need to use a background picture, because we could use the background picture of the parent DIV. We just need to make a backward link to the homepage. So let’s do it.


h1 {
	position:relative;
	width:400px;
	height:125px;
	text-indent:-8000px;  
	top:70px;
	left:10px;
}
h1 a{
	display:block;
	height:125px;
	text-decoration:none;
}

First, we have to define width and height of the area that will become a link and define a positioning method. In this example I used a position:relative; but you could use the absolute positioning, but remember that the parent element must be relatively positioned then. To remove the text we used text-indent method, and to position in the proper area we used top and left properties.

We will display the link as block, and give it an exact height as H1. To prevent possible problems we will use text-decoration:none; (this will help because some versions of Firefox displays the underline where there is no text.).

Using images to replace navigation elements

First, let’s take a look at our navigation example, and what are we trying to accomplish.


<ul>
	<li id="about"><a href="#" title="About us">About us</a></li>
	<li id="contact"><a href="#" title="Contact">Contact</a></li>
</ul>

Image replaced navigation

You have already noticed that we are using element IDs to attach a background image to them. So, we defined two IDs here – about and contact to which we will attack a background image with #about a { ... }. If you are not familiar with creating horizontal menus then you should read article about creating one. We will use the second method explained in that article, with addition of adding new CSS code and removing some old.

The same as in all our examples here, we will remove the indent with #navigation li { text-indent:-8000px; }. You should also remove any color and background-color definitions, as we don’t need them anymore. It is also very important to define widths and heights for the links. Without them the images will not display correctly because there will not be enough space to display them.


#about a {
	background:url(about.gif) no-repeat;
}
#about a:hover, #about a.selected {
	background:url(about-hover.gif);
}

We defined two styles for each navigation element. One when the mouse is out of focus and the other when the mouse is over the element, and where the element is selected. If you are using more complicated navigations on your website, you should consider grouping the CSS and even using one image for the whole navigation (read the article that also solves another Firefox problem).

Common problems and mistakes

If you use the image replacement techniques explained in this article, you have to be familiar with element IDs because the replacements explained here are using IDs of an element to attach an image. When you just want to display a background image alongside with the text you could use classes instead (classes can be used many times, while IDs are unique).

While using image replacements for headings, there aren’t many problems, but they just POP up when you try to replace navigation elements. This is because in navigation you replace the list-item one by one by their unique ID. If an image isn’t where it should be, this could be because of padding and margins you are using on your navigation lists. Try to fix this by removing the padding and margins to zero.

The example

Take a look at our example