STYLE SHEETS

Spanning H2 Elements for Image Replacement

Welcome to the fifth part of a six-part series on CSS-based image replacement techniques. In this part, you'll learn how to use Todd Fahrner’s image replacement method with all of the H2 elements of a basic web page.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

November 30, 2009

TABLE OF CONTENTS:

If you’re anything like me, then surely you’ll want to see how the CSS snippet created in the previous segment can be tied to the structure of a simple web page. Taking into account this possibility, below I coded such a page for you, so you can see how all of its H2 elements are neatly decorated with my humble background image. Here’s how this web page looks:

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

<head>

<title>Fahrner Image Replacement (FIR) on H1 and H2 elements</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;

}

/* apply image replacement on H1 element */

#header h1 {

width: 400px;

height: 200px;

margin: 0;

padding: 0;

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

}

#header h1 span {

display: none;

}

/* apply image replacement on H2 elements */

h2 {

width: 300px;

height: 150px;

margin: 0;

padding: 0;

background: url(h2.png) top left no-repeat;

}

h2 span {

display: none;

}

</style>

</head>

<body>

<h1><span>Welcome to our website</span></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><span>Main content section</span></h2>

</div>

<h2><span>Footer section</span></h2>

</div>

</body>

</html>

There you have it. Now, if you’re feeling eager and want to see if this image replacement approach really works as expected, then go ahead and test this sample code on your own browser. If all goes well, you should get an output similar to the one depicted below:

Well, it worked, right? So at this point you've learned yet another IR method, which is pretty easy to implement, even at the expense of coding here and there some additional <span> elements. However, it’s fair to mention that this particular implementation of the previous method is somewhat outdated, since there exists an improved version of it. So, if you want to learn more about this, jump forward and read the article’s bottom line.

Final thoughts

How time flies! In a flicker of the eye we’ve come to the end of this fifth part of the series. Overall, the experience has been quite educational, as you learned how to implement Todd Fahrner’s image replacement method with all of the H2 elements of a basic web page.

As you saw for yourself, this approach is slightly harder to apply due to the fact that it requires you to code two <span> tags per element being styled, which is an additional burden -- and leads to writing sections of markup with no true semantic meaning.

But before I hear your loud complaints, allow me tell you that this method has been largely enhanced over time, and its improved version is quite possibly the most popular among web designers nowadays. For the moment I’ll keep exploring it as it was originally developed, so in the next tutorial I’ll be showing how to use it with some <a> elements.

Don’t miss the tutorial to come!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.