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.
Spanning H2 Elements for Image Replacement - Styling multiple H2 headers with Fahrner's IR method (Page 3 of 4 )
As you may have guessed, implementing Fahrner’s IR approach with all of the H2 elements of a web page is only a matter of adding a couple of extra <span> tags to them and applying the same CSS styles used in the example learned in the previous section. It’s that easy, really.
However, the best way to understand the fine details of this process is by showing some functional code. So, below you'll find the CSS block that performs the corresponding image replacement on all of the H2 elements included in the web page:
h2 {
width: 300px;
height: 150px;
margin: 0;
padding: 0;
background: url(h2.png) top left no-repeat;
}
h2 span {
display: none;
}
From the above code fragment, it’s fairly easy to realize how the replacement process is accomplished on all of the H2 headers. Once the following background image is assigned to each of the headers:
Then, each portion of text surrounded by the extra <span> tags is hidden from view via the “display: none” style. That’s not difficult to grasp, right?
So far, everything looks good, and you should now have a clear idea of how to apply Fahrner’s IR approach to multiple H2 elements in one go. Yet, the previous example is still incomplete, as it’s necessary to bind it to the corresponding markup of the web page.
But guess what? This will be done in the following segment. Therefore, go ahead and read the lines to come.
Style Sheets 
HTML5 Boilerplate Introduction
