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 - Improving on Fahrner with empty span tags (Page 3 of 4 )
In the previous section I mentioned that Fahrner’s image replacement method was considerably improved to solve a specific accessibility issue. But what is that improvement? It consists basically of adding two empty <span> tags to the web page element being styled, in such a way that its inner text will remain visible even if the corresponding background image isn’t downloaded by the browser.
To understand more clearly how this method works, I suggest you look at the following CSS fragment, which performs the pertinent image replacement process on the H1 header of the web document:
#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;
}
As seen before, the functionality of this approach is based simply on assigning a relative position to the target H1 element, while the complementary <span> tag is positioned absolutely with reference to its parent. This allows you to directly mask the header’s inner text with a background image. This implies that if the image isn’t displayed on screen, the text will still remain visible, and thus accessible.
Of course, this benefit comes at a cost, since it’s necessary to add two empty <span> tags per element being styled. Admittedly, this can be fairly annoying. However, as with many things in life, not all that glitters is gold, right?
In addition, here’s the background image that will be used to decorate the previous H1 elements. It is very similar to others shown in the previous tutorials, except that this one has been saved in GIF format.
So far, so good. Now that you've surely grasped the logic that drives the enhanced Fahrner’s image replacement method, it’s time to tie the previous CSS snippet to the markup of a web page, so you can see how these two pieces fit together neatly.
This will be done in the last section of the tutorial. Therefore, to get there now, click on the link below and read the lines to come.
Style Sheets 
HTML5 Boilerplate Introduction
