Using the Padding-Top CSS Property with H2 Headers for Image Replacement

As you may have guessed, applying Langridge’s image replacement method to all of the H2 elements included in a web page is not very different from performing the same task with an H1 header. For the sake of simplicity, the background image used in this example will be identical to the one shown in previous tutorials, so basically the CSS code required for styling the headers in question will look as follows:

h2 {

width: 300px;

height: 0;

padding-top: 150px;

background: url(h2.png) top left no-repeat;

overflow: hidden;

} 

That’s really simple to read, isn’t? As seen before, the proper combination of the “height” and “padding-top” properties makes it possible to give a more attractive look to all of the H2 selectors without altering a single section of their markup, via the following background image:

While the implementation of this image replacement method is very straightforward and can be applied to a diversity of web page elements, it’s fair to say that it suffers from the same accessibility issue as Rundle’s approach.

What does this mean in simple terms? Well, if the background image fails to download, the targeted element will remain hidden from display, thus becoming inaccessible to users. Sad to say, but true.

However, now that you’re aware of the pros and cons of this image replacement method, it’s time to include the previous CSS styles in the structure of a web page, giving the final touches to the method’s implementation.

The fine details of this process will be covered in the section to come, so click on the link below and read the next few lines.