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) is wrapped in a div with the class footerBackground
. With this in place we can target a CSS rule to set the background image for the top of the page on the body tag:
body {
background-image: url("../img/topSlice.png”);
background-repeat: repeat-x;
}Then another rule for footerBackground. This is where we'll place the image we want for the bottom of the page.
.footerBackground {
background-image: url("../img/bottomSlice.png”);
background-repeat: repeat-x;
background-position: bottom;
}This technique works well and consistently across most browsers. However, I'm never a fan of adding additional markup merely to solve presentational problems.
Thankfully this problem is easily solved with the CSS3 as it allows multiple backgrounds for an element (part of the CSS Backgrounds and Borders Module Level 3). It's well supported, with Internet Explorer 8 and below being the only notable exceptions. Here's the syntax:
background:
url('../img/1.png'),
url('../img/2.png'),
url('../img/3.png'),As with the stacking order of multiple shadows, the image listed first appears nearest to the 'top' in the browser. You can also add a general color for the background in the same declaration if you wish, like this:
background:
url('../img/1.png'),
url('../img/2.png'),
url('../img/3.png') left bottom, black;Specify the color last and this will show below every image specified above.
Browsers that don't understand the multiple backgrounds rule (such as Internet Explorer 8 and below) will ignore the rule altogether so you may wish to declare a 'normal' background property immediately before a CSS3 multiple background rule as a fallback for older browsers.
With the multiple backgrounds, as long as you're using PNG files with transparency, any partially transparent background images that sit on top of another will show through below. However, background images don't have to sit on top of one another, nor do they all have to be the same size.
To set different sizes for each image, use the background-size property. When multiple images have been used, the syntax works like this:
background-size: 100% 50%, 300px 400px, auto;
The size values (first width, then height) for each image are declared, separated by commas in the order they are listed in the background property. As in the example above, you can use percentage or pixel values for each image alongside the following:
Another thing that's possible is to specify different positions for the different images. We could do that by amending the rule like this:
background:
url('../img/1.png') center,
url('../img/2.png'),
url('../img/3.png') left bottom, black;Where no position is declared, as in the second image, the default position of top left is used.
There is a shorthand method of combining the different background properties together. However, my experience so far has been that it produces erratic results. Therefore, I tend to use the longhand method and declare the multiple images first, then the size, and then the position.
Note
Read the W3C documentation on multiple background elements here: http://www.w3.org/TR/css3-background/#layering
Read about background sizing here: http://www.w3.org/TR/css3-background/#the-background-size
And background positions here: http://www.w3.org/TR/css3-background/#the-background-position