Using Empty Span Tags with H2 Headers for Image Replacement

True to form, one of the most appealing facets of CSS-based image replacement (IR) is its remarkably flat learning curve. Many of the methods created for this purpose in the past few years can be mastered by those with only an intermediate background in style sheets and (X)HTML.

Therefore, if you’re a web designer who wants to start digging deeper in the always-exciting terrain of image replacement, then in this group of articles you’ll find a comprehensive guide that will show you how to implement the most efficient IR approaches available today. You can use them to give your web pages a fresh look without messing up their structural markup.

Naturally, if you’ve already read all of the tutorials that precede this one, then it’s probable that you understand the IR methods developed by Mike Rundle and Todd Fahrner respectively. In those articles I demonstrated how to implement the methods via a decent variety of code samples, first decorating H1 and H2 headers and then styling some basic <a> elements.

However, it’s fair to mention here that the original Fahrner’s approach has been considerably improved over time. Currently it allows you not only to add eye-catching background images to different text-based web page elements, but helps you to keep those elements visible even if the pertinent images fail to download.

In the last part of the series I showed how to use this enhanced IR method only with a single H1 header, but as you may have guessed, it’s possible to apply it to other HTML elements with the same ease. Thus, in the next few lines I’ll be discussing how to use Fahrner’s improved technique with multiple H2 headers, a process that hopefully will be educational and, why not, also fun.

Ready to learn more useful things about this handy image replacement method? Then start reading now!