HTML and CSS Reference
In-Depth Information
MULTIPLE
BACKGROUNDS
FIGURE 4.30 Multiple back-
grounds rock!
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 topic.
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 {
.
: ) p t ,
p url(../images/clouds.png) top right no-repeat,
p linear-gradient(top right, #3B6498, #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 ).
 
 
 
Search WWH ::




Custom Search