In this seventh part of a series that explains image replacement techniques, I show you how to use the enhanced version of Todd Fahrner’s method. It uses two empty <span> elements to perform the image replacement process, thus efficiently addressing the problem that arises when the background image assigned to the targeted web page element isn’t downloaded properly by the browser.
Image Replacement with Empty Span Tags - Fahrner's improved method in action (Page 4 of 4 )
Undeniably, the best way to understand how the image replacement method discussed in the preceding segment does its business is by coding a sample web document that shows the method’s actual functionality. Bearing this in mind, below I included this document for you, so take a close look at it:
<!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 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;
}
</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</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</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>
As the above XHTML page shows, now the <span> tags wrapped by the targeted H1 header have been moved out of its inner text, which turns them automatically into empty elements. This isn’t very elegant, obviously, especially when you want to code clean markup, but it fixes the background image issue mentioned previously.
Also, if you have some doubts about the real efficiency of this image replacement approach, go ahead and give the previous example a try. You should get an output similar to this:
While it’s fair to say that from a purist’s point of view, this image replacement approach can be considered a simple CSS hack, the truth is that it not only allows you to give boring text-based web page elements a more appealing look, but it efficiently solves the problem caused by broken background images. These are, definitely, good points to take into consideration.
Final thoughts
In this seventh chapter of the series, I provided you with the right pointers to start using the enhanced version of Todd Fahrner’s method. It uses two empty <span> elements to perform the image replacement process, efficiently addressing the problem that arises when the background image assigned to the targeted web page element isn’t downloaded properly by the browser.
In the previous examples, this approach was implemented only with the H1 header of a trivial web page, but in the next tutorial I’ll be showing how to apply it to some H2 headers as well.
Don’t miss the upcoming 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
