STYLE SHEETS

Image Replacement CSS Techniques

Image replacement is a useful approach for solving certain web design problems. In this first article of a series that examines this technique, we take a closer look at an image replacement approach that relies on assigning a large negative value to the “text-indent” CSS property to hide the text wrapped by a web page element, thus unmasking its background image.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

November 20, 2009

TABLE OF CONTENTS:

To start explaining the logic that stands behind most image replacement techniques, I'm going to build a sample web page, which will include an H1 element. In its initial state, the text surrounded by the element in question will be neither decorated with any fancy background image nor hidden from display. As you'll see later, we'll use a simple CSS approach to change this.

Now that I've explained that, please look at the source code of the aforementioned web page, which is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Sample web page</title>

body {

padding: 0;

margin: 0;

background: #fff;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

background: #ffc;

}

#header, #content, #footer {

padding: 20px;

}

</style>

</head>

<body>

<h1>Welcome to our website</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>

</div>

<h2>Main content section</h2>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

As you can see, the structure of the above web page is indeed basic, as it’s only composed of the typical header, content and footer sections respectively, similar to ones that you’ve probably coded hundreds of times before. In addition, the page includes some CSS styles that define its initial visual appearance, which are very easy to understand as well.

While it’s fair to say that both the styles and the markup that make up this web page are a breeze to grasp, they render an arid, text-based document that misses the glory of a refreshing image. To spice things up a little bit, it’d be useful to replace the text surrounded by the H1 header with an image that makes it look more appealing.

So, how can this be done without messing up the structural markup with an ugly “img” tag that wouldn’t have a true semantic meaning? Well, here’s where image replacement comes into play. It's possible to use some CSS styles to add the image without altering a single piece of the markup.

As I said at the beginning, there are a few approaches one can take to perform the whole replacement process. In the next section I’m going to show you the first of them, which will rely on the “text-indent” CSS property to do its “magic.”

Now, to learn more about this IR technique, click on the link below and read the upcoming segment.

Next: Using image replacement to style an H1 element >>