HTML and CSS Reference
In-Depth Information
#hdrBlog {
width: 63px;
background-position: -88px 0;
}
#hdrPortfolio {
width: 107px;
background-position: -158px 0;
}
#hdrAbout {
width: 83px;
background-position: -272px 0;
}
[...]
<h2 id="hdrHome">Home</h2>
<h2 id="hdrBlog">Blog</h2>
<h2 id="hdrPortfolio">Portfolio</h2>
<h2 id="hdrAbout">About</h2>
Figure 9.3
Image
replacement for
headings.
Image replacement is a handy tool if used sparingly and for text that
will not change often. The technique's major drawback is that it is fairly
inflexible and requires images (or an image sprite as in the previous
example) to be generated for each piece of text being replaced or edited.
