Using the Padding-Top CSS Property with H2 Headers for Image Replacement
In this penultimate installment of the series, I demonstrate how to apply Langridge’s image replacement method to all of the H2 headers of a trivial XHTML document. The inner workings of this approach are very easy to grasp, so you shouldn’t have major problems using it within your own web pages.
Using the Padding-Top CSS Property with H2 Headers for Image Replacement (Page 1 of 4 )
Despite the variety of image replacement methods created in the last few years, the good news is that learning how to implement them is a fairly straightforward process, even for web designers with only an average background in CSS and (X)HTML.
Frankly speaking, many of these methods have one thing in common, which makes it even easier to grasp their driving logic. They use one or multiple CSS properties for hiding from view the inner section of text of a web page element, while keeping the assigned background image visible.
In previous chapters of this series, I took an in-depth look at the image replacement techniques developed by Mike Rundle and Todd Fahrner respectively, since these are the most popular in professional web design. Rundle’s method doesn’t require writing additional markup and makes clever use of the “text-indent” CSS property to perform the corresponding image replacement.
On the other hand, Fahrner’s technique comes in two different flavors. Both of them require coding a couple of extra <span> tags: the first approach utilizes the tags for directly wrapping the text of the targeted web page element, while the second option moves the “spans” out of the text section, which solves the accessibility problem caused by broken background images.
Given the diversity of image replacement methods available, you might think that list stops here, right? Well, not so fast; there’s yet another approach that might be appealing to you, since it sits between the methods described above. In this case, I’m talking about Stuart Langridge’s technique, which I already started implementing in the last tutorial for decorating an H1 header of an XHTML page.
Since this approach uses the “padding-top” property to do its thing, it provides enough flexibility to be applied to other web page elements as well. Thus, in the lines to come I’ll be showing how to use this handy method for styling the H2 headers of the same XHTML document.
Want to see how this will be accomplished in a few simple steps? Then start reading now!
Style Sheets 
HTML5 Boilerplate Introduction
