O'Reilly logo

Responsive Web Design with HTML5 and CSS3 by Ben Frain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Multiple background images

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> <!--! ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required