This relatively short post should give you an insight into image replacement. Image replacement is the technique of taking some text usually a logo and replacing it with an image.

XHTML Code

this code can be done with relatively little XHTML code, a good example would be a logo for a company.

<h1 class="thelogo">Company logo</h1>

As you can see all I have done is a simple H1 tag and added a class of thelogo. this can now be referenced via our CSS.

CSS code

In the CSS we need to do several things firstly set the image as the background for H1.

.thelogo { background-image:url('logo.gif'); }
if you refresh the page within a browser you will now see the image in the background with the text Company Logo in the forefront. We can now use the text-indent attribute to remove the text like below:

.thelogo { background-image:url('logo.gif'); text-indent:-9999px;}

Now when you refresh your browser the image will remain but the text will have been pushed far off to the left as to not be visible.