Using Empty Span Tags with H2 Headers for Image Replacement
In this eighth installment of a series on image replacement techniques, you'll learn how to use Fahrner’s enhanced image replacement method for styling all of the H2 elements included in a sample web document. This method uses two empty <span> tags in a clever way which permits you to efficiently solve the problem caused by broken background images.
Using Empty Span Tags with H2 Headers for Image Replacement - Putting it all together on one web page (Page 4 of 4 )
To close this chapter of the series, I’d like to show you how the CSS styles created in the preceding segment can be used within the context of a web page. Since the goal is to style the page’s H2 headers, each of these elements must include a couple of empty <span> tags.
This process is demonstrated quite clearly in the following code sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Variation of Fahrner Image Replacement (FIR) on H1 and H2 elements</title>
<style type="text/css">
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 {
position: relative;
width: 400px;
height: 200px;
margin: 0;
padding: 0;
overflow: hidden;
}
#header h1 span {
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 400px;
height: 200px;
margin: 0;
padding:0;
background: url(h1.gif) top left no-repeat;
}
/* apply image replacement on H2 elements */
h2 {
position: relative;
width: 300px;
height: 150px;
margin: 0;
padding: 0;
overflow: hidden;
}
h2 span {
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 300px;
height: 150px;
margin: 0;
padding: 0;
background: url(h2.gif) top left no-repeat;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Welcome to our website<span></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>
<div id="content">
<h2>Main content section<span></span></h2>
<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>
<div id="footer">
<h2>Footer section<span></span></h2>
<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>
</div>
</body>
</html>
Mission accomplished. Of course, if you decide to test the previous sample web page on your own machine, then you should see a web document that looks similar to this:
Even though, at first glance, using little pieces of empty markup to decorate certain web page elements seems to be a pretty ineffective process, you’d be surprised at the large number of websites that currently implement this image replacement method.
And to be frank, this happens for two simple reasons: firstly, the method efficiently resolves the background image-related issue mentioned in the introduction, and secondly, it allows you to style any element without the need to add non-semantic <img> tags all over the XHTML document. What else can you ask for?
Of course, you can always change your mind and go back to using Rundle’s method, which is quite popular with many web designers as well. What image replacement approach you choose depends on your personal requirements and preferences.
Final thoughts
That’s all for now. In this eighth installment of the series, you learned how to use Fahrner’s enhanced image replacement method for styling all of the H2 elements included in a sample web document. As you saw before, this method uses two empty <span> tags in a clever way, which permits you to efficiently solve the problem caused by broken background images.
In the tutorial to come, I’ll be discussing how to use the same IR method to improve the visual presentation of some hyperlinks. Don’t miss the next part!
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.
Style Sheets 
HTML5 Boilerplate Introduction
