Image Replacement CSS Techniques

One of the most commonly-used image replacement techniques in modern web design is the one developed by Mike Rundle. It relies on assigning a huge negative value to the “text-indent” CSS property, which shifts the text wrapped by a web page element brutally to the left, therefore hiding it. If, aside from hiding its text from view, the element is assigned a background image, the pertinent image will be displayed on screen without any trace of the annoying text. Got the point? Great.

To demonstrate how to apply this IR method to the H1 header of the web page built in the preceding segment, I’m going to use the following background image:

The graphic above may not be the finest artwork, but it's illustrative enough to put Mike Rundle’s approach into action. So, having created the background image, the CSS code required to replace the text of an H1 element on the previous web document will be as simple as this:

/* apply image replacement on H1 element */

#header h1 {

width: 400px;

height: 200px;

background: url(h1.png) center center no-repeat;

text-indent: -9999px;

}

As seen in the above code fragment, the dimensions of the targeted H1 element now match the width and height of its background image, apart from assigning a value of -9999px to its “text-indent” property. In doing so, the text of the header will be hidden from display, while the background image will remain visible. Easy to code and read, isn’t it?

Now that you understand how the previous image replacement method does its thing, it’s time to show the modified version of the earlier web page, this time including the above CSS snippet. This will be done in the following section, so go head and read the lines to come.