HTML and CSS Reference
In-Depth Information
FIGURE 4.31
A great effect
created with multiple
gradients.
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 won-
der 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
).
NOTE:
At the time of this writing, there are differences
between browser implementations of multiple gradients,
but these should be ironed out by the topic's release.
