Indenting H2 Elements as a CSS Image Replacement Technique - Styling H2 elements
(Page 3 of 4 )
If you found it easy to understand how to implement the previous image replacement approach with an H1 element on a web page, then when I show you how to perform the same task with all of its H2 headers, your love for CSS will be even stronger, trust me.
Does this sound a bit exaggerated? Well, it’s possible. Imagine that you’re bored with your text-based H2 elements and want to spice them up with the following background image:
By using the IR approach that you learned in the preceding section, styling all of the H2 headers of the web document would be reduced to coding the CSS styles below:
h2 {
width: 300px;
height: 150px;
background: url(h2.png) center center no-repeat;
text-indent: -9999px;
}
There you have it. Once again, assigning a value of –9999px to the headers in question will make them display the previous background image, while the inner text will disappear into limbo.
Of course, if you’re like me, you’ll want to see how this short CSS fragment can be merged with the one that styles H1 elements. In the section to come I’ll be showing the full source code of a brand new web document, which will include this last IR snippet.
Please read the following segment. It’s only one click away.
Next: Applying the same IR technique to H1 and H2 elements >>
More Style Sheets Articles
More By Alejandro Gervasio
