Using the Padding-Top CSS Property for Image Replacement
In this tenth part of the series, I show you how to start using the image replacement method created by Stuart Langridge. It uses the “padding-top” CSS property to mask the text of the targeted web page element while keeping its background image visible.
Using the Padding-Top CSS Property for Image Replacement - Review: Fahrner's approach with web page links (Page 2 of 4 )
In the previous article I explained how to implement the enhanced version of Todd Fahrner’s image replacement method with some web page links. Below I included the source code corresponding to this example, so you can study it in detail. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Variation of Fahrner Image Replacement (FIR) on H1, H2 elements and links</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 {
position: relative;
width: 400px;
height: 200px;
margin: 0;
padding: 0;
overflow: hidden;
}
#header h1 span {
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 400px;
height: 200px;
margin: 0;
padding:0;
background: url(h1.gif) top left no-repeat;
}
/* apply image replacement on H2 elements */
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;
}
/* apply image replacement on links with this class */
.fancy_link {
position: relative;
display: block;
width: 200px;
height: 50px;
margin: 0;
padding: 0;
}
.fancy_link span {
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 200px;
height: 50px;
margin: 0;
padding: 0;
background: url(fancy_link.gif) top left no-repeat;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Welcome to our website<span></span></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>
<a href="#" class="fancy_link">Read more on this topic...<span></span></a>
</div>
<div id="content">
<h2>Main content section<span></span></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>
<a href="#" class="fancy_link">Read more on this topic...<span></span></a>
</div>
<div id="footer">
<h2>Footer section<span></span></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>
<a href="#" class="fancy_link">Read more on this topic...<span></span></a>
</div>
</div>
</body>
</html>
As you can see in the above code fragment, the improved Fahrner’s method permits you to not only decorate any text-based element with a background image while hiding its inner text from view, but solves quite efficiently the issue that occurs when the image in question isn’t downloaded properly by the browser.
In this concrete case, the method has been used to decorate all the <a> elements that have been assigned a “fancy_link” CSS class, which yields a web page that looks similar to this:
Undoubtedly, the versatility offered by this version of Fahrner’s technique makes it one of the most popular among web designers nowadays, even at the expense of having to code a couple of empty <span> tags per element being styled. As with many other things in life, when it comes to using image replacement for building clean, well-structured web pages, you can’t win all the battles, unfortunately.
As I said in the introduction, though, there’s yet another method that deserves a deeper analysis, as it does its thing without making you write additional markup. In this particular case, I’m talking about the technique created by Stuart Langridge, which makes use of the “padding-top” CSS property to perform the replacement process.
Assuming that you’re interested in learning the ins and outs of this alternative approach, in the following section I’ll be discussing how to use it for styling the H1 header of the web page that you saw before.
Style Sheets 
HTML5 Boilerplate Introduction
