Indenting H2 Elements as a CSS Image Replacement Technique
In this second part of a six-part series on image replacement techniques, I demonstrate how to use the technique you learned in the previous part on all of the H2 headers contained in a sample web document. This technique is fairly straightforward, so you shouldn’t have any major problems using it within your own web pages.
Indenting H2 Elements as a CSS Image Replacement Technique - Review: image replacement with an H1 header (Page 2 of 4 )
As usual, before I start discussing how to use the IR approach developed by Mike Rundle with all of the H2 elements included in a web page, I'll spend a few minutes reintroducing the example created in the prior tutorial. It showed how to use his approach with an H1 header.
With that being said, the example in question used the following background image to style the targeted H1 element:
And finally, here’s the sample web page that implements the IR approach discussed in the introduction. Take a look at it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Mike Rundle's image replacement on H1 elements</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: #fff;
font: 1em Arial, Helvetica, sans-serif;
color: #000;
}
#wrapper {
width: 960px;
margin: 0 auto;
background: #ffc;
}
#header, #content, #footer {
padding: 20px;
}
/* apply image replacement on H1 element */
#header h1 {
width: 400px;
height: 200px;
background: url(h1.png) center center no-repeat;
text-indent: -9999px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Welcome to our website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
</div>
<div id="content">
<h2>Main content section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
</div>
<div id="footer">
<h2>Footer section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
</div>
</div>
</body>
</html>
From the previous code sample, it’s clear to see how easy it is to apply image replacement to an H1 element by assigning a negative value to its “text-indent” property. The result of this process can be observed partially in the following screen shot:
Not too bad, huh? This IR method allows you to not only replace text-based elements on a web page with some neat background images, but it doesn’t require any extra, useless markup. Those advantages, though, come with a cost: if the images aren’t downloaded by the browser, the elements will remain inaccessible to the user. Sad but true.
However, as I stated earlier, this approach is very flexible and can be used easily with other web page elements. Thus, in the following segment I’ll be explaining how to utilize it with all of the H2 headers in the previous web document.
To learn the full details of this styling process, click on the link below and read the upcoming segment.
Style Sheets 
HTML5 Boilerplate Introduction
