This chapter is from the book
This chapter is from the book
This chapter is from the book
Multiple Backgrounds
CSS3 gives you the ability to attach multiple backgrounds to a single element, which is très cool. For so long, if you wanted to have multiple background images on a container, you had to have a number of extraneous wrapper <div>s for the extra background images, which was a very lame hack to have to use.
The multiple backgrounds are simply added in a comma-delimited list. Let’s look at a simple example to illustrate the point; you’ll revisit multiple backgrounds a number of times throughout the book.
If you again consult the Monty Python example in the king arthur blog example folder, you’ll find the following in the main-style.css file (multiple vendor prefixed versions have been omitted here for brevity):
body {
...
background: url(../images/castle.png) top left no-repeat, url(../images/clouds.png) top right no-repeat, linear-gradient(top right, #3B6498, #C1CDDB);
background-color: #C1CDDB;
}
Notice that I’ve used two background images here and a gradient as well. The ability to include CSS gradients in the list of multiple backgrounds makes them even more awesome! I’ve also included a separate background color as a fallback for nonsupporting browsers (Figure 4.30).
)
Figure 4.30 Multiple backgrounds rock!
The castle is positioned at the top left, the clouds are positioned at the top right so they flow nicely behind the castle, and a subtle blue gradient has been added behind both for the sky. If you resize the browser with this demo open, it will immediately become evident how awesome and flexible multiple backgrounds are!
However, you need to bear in mind that the images later in the property value appear behind those earlier on, which is rather contrary to the way CSS usually works. In CSS, elements drawn later appear on top of those drawn before, so you’d expect it to work the same way with background images. Occasionally, you’ll wonder what the spec writers were thinking when they wrote certain parts of the spec.
Multiple backgrounds are also very cool for using multiple gradients together to create complex background patterns. In the Monty Python example (full-post.html/full-post.css), I’ve used positioning to lay the figure captions over the top of the images. I then used two gradients to apply a grainy texture to the images and added a highlight to each one (Figure 4.31).
)
Figure 4.31 A great effect created with multiple gradients.
NOTE
At the time of this writing, there are differences between browser implementations of multiple gradients, but these should be ironed out by the book’s release.
Another interesting effect to explore is combining a gradient effect with background-size to force it to repeat as a single, small, square unit (rather than along the gradient, as is the case with normal repeating gradients). You’ll see this in action again later on in the book, too. Consider this example:
background: radial-gradient(transparent 10px, #A60000 11px, #A60000 12px), repeating-linear-gradient(transparent, transparent 20px, rgba(255,0,0,1) 21px, rgba(255,0,0,1) 21px) 0 -10px, repeating-linear-gradient(left, transparent, rgba(255,0,0,1) 19px, transparent 21px) 12px 0; background-size: 21px 21px, 100%;
The effect is shown in Figure 4.32. This example is in the file gradient-background-size.html.
)
Figure 4.32 A rather interesting pattern created with multiple gradients and background-size.
The radial gradient creates a simple, small, transparent circle with red on the outside. The background-size property was used to force this circle into a 22-pixel square, which then repeats. A couple of simple line patterns are then placed over the top and spaced so they perfectly bisect the circles, horizontally and vertically. This is a rather complex bit of code to write for a simple repeating pattern, but it does show what is possible. You can find more aesthetically pleasing examples at Lea Verou’s fantastic CSS3 patterns gallery at http://lea.verou.me/css3patterns.
Multiple Backgrounds in IE?
Unfortunately, CSS3PIE’s supremacy collapses when you consider multiple background support in past versions of IE. There isn’t a decent way to add support for multiple backgrounds to older IE versions without resorting to those nasty old nested <div>s. And you don’t want to go down that road!
So, the only way around this limitation is to provide alternative styling, either via a conditional comment or via Modernizr, which you’ll explore in Chapter 5.
TIP
Providing multiple background image fallbacks is difficult if you need the flexibility the multiple backgrounds provide in a liquid layout, as in the Monty Python example. To make IE fallback styling easier to work out, it’s best to make the layout fixed in IE by serving a style in your IE-targeted CSS, such as: body { width: 1024px; }.