CSS: image replacement tutorial

This tutorial will guide you through a detailed overview of a simple CSS technique used to replace an element's content with a background image. Further, we're going to extend this technique to allow you to create a simple rollover effect. First, let's start with our markup:

<h1><a href="#">...</a></h1>

The first thing we need to do is to set the dimensions and metrics of our container element which, in this case, is an h1 element:

h1 {
 margin: 0;
 height: 160px;
 width: 400px;
}

Let's move on and prepare our link element. We need to set a background image for its normal state and another image for the rollover. We also need to hide its textual content. This can be achieved by using negative text indentation. Obviously the element must be turned into a block-level element and its dimensions set accordingly:

h1 a:link, h1 a:visited {

  background: url(h1.png) no-repeat 0 0;
  display: block;
  text-indent: -1000em;
  width: 100%;
  height: 120px;
}

h1 a:hover {
 background: url(h1-hover.png) no-repeat 0 0;
}

You can see the result in the demo below.

Demo

Live demo