A common design requirement is to build a page with a different background image at the top of the page than at the bottom. Or perhaps different images for the top and bottom of a content section within a page. It seems such a straightforward requirement, that it's understandable to assume this could be easily achieved with CSS. However, with CSS2.1, achieving the effect typically required additional markup. For example, until CSS3, this is how I've always solved the problem:
<body class=”headerBackgroundHere”>
<div class=”footerBackground”>
<div id=”container”>
<header>
// Header content here
</header>
<div id=”main” role=”main”>
// Main content here
</div>
<footer>
// Footer content here
</footer>
</div>
</div> <!--! end of .footerBackground -->
</body>You'll notice the entire content container (which is the div with an id of container...