Using Empty Span Tags with H2 Headers for Image Replacement

If you found it really easy to use Fahrner’s enhanced IR approach with a single H1 element of a web document, then you’ll quickly grasp how to perform the same task with the document’s H2 headers. Since the best way to understand the inner workings of this styling process is by example, in the lines to come I coded the set of CSS styles required for replacing the text wrapped by the headers in question with a basic background image.

Having explained that, here are the aforementioned CSS styles:

h2 {

position: relative;

width: 300px;

height: 150px;

margin: 0;

padding: 0;

overflow: hidden;

}

h2 span {

display: block;

position: absolute;

left: 0;

top: 0;

z-index: 1;

width: 300px;

height: 150px;

margin: 0;

padding: 0;

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

}

From this code sample, it’s clear to see how this IR method works. All of the H2 selectors have been relatively positioned in the XHTML document, while the corresponding child <span> elements have been located absolutely, a process that overlaps the assigned background image with the headers’ inner text.

In addition, to complement the previous explanation, below I've placed the background image used in this concrete example:

Obviously, to achieve the desired visual effect, this image shouldn’t contain any transparent sectors, so keep this important detail in mind before you start creating your own replacement background graphics!

So far, so good. At this point, you’ve surely grasped how to use Fahrner’s enhanced IR method to give a more appealing look to all of the H2 headers of a web document. So, what’s the next step? Well, logically the earlier CSS styles must be tied to the structural markup, to make it possible to see the actual functionality of this image replacement approach.

This will be done in the following section, so read the lines to come.