Image Replacement with Empty Span Tags

Regardless of its intimidating name, image replacement is nothing but a simple method that uses the functionality of CSS to add an appealing background image to a web page element, while hiding its inner text from view.

Frankly speaking, image replacement (IR) is a fairly old player in the terrain of professional web design. As such, it comes in different flavors and versions, so it’s quite probable that among the plethora of options available today, you'll find the one that best suits your needs.

However, when it comes down to implementing IR approaches that rely only on style sheets to do their business, usually they belong to one of two well-differentiated categories: first, the methods that do require coding additional markup, generally in the form of <span> tags, and second, the ones that don’t. In this case, fortunately, there’s not a gray, undefined area.

In previous parts of this series I demonstrated how to implement the image replacement approach developed by Mike Rundle. It doesn’t demand the use of extra markup, and utilizes the “text-indent” CSS property for hiding the text of a targeted element. In addition, I provided an in-depth coverage of Todd Fahrner’s method, which does employ a couple of <span> tags to achieve exactly the same result.

For obvious reasons, if these two methods do the same thing, then it’d be logical to choose the first one, as this doesn’t use additional <span> elements, right? Well, as you’ll recall, in both approaches, if the element’s background image fails to download, it will remain hidden from display and therefore inaccessible.

However, there’s an improved version of Fahrner’s approach that permits us to solve this issue fairly easily. In the following lines I’ll be showing how to implement it with the H1 header of a basic web page. To learn more about this enhanced IR approach, start reading right now!