HTML and CSS Reference
In-Depth Information
In browsers that understand the CSS3 shorthand syntax, the result is identical to the screen shot on the left
of Figure
8-27
. The shorthand for yachts.jpg is basically the same as in css3_shorthand.html, which was explained
in the preceding section. The only difference is that it doesn't contain the color because only the final list of
values can contain a color. The shorthand for stripe.png omits all other values because it uses the defaults to fill
the entire background. The color is included only as a fallback in case stripe.png cannot be loaded.
Summary
CSS gives you considerable control over background images, particularly in CSS3-compliant browsers that
support the new
background-size
,
background-origin
, and
background-clip
properties. But even in older
browsers, you can position background images with great accuracy. Background images are displayed only inside
the element they're attached to. Any excess is hidden by the element's margins, making it possible to combine
multiple images in a CSS sprite and use
background-position
to display only one. You can also add a patterned
background by repeating a tiny image across the horizontal or vertical axes or both.
In this chapter, you also learned how to use the
background
shorthand property in combination with
individual properties to provide a fallback option for older browsers. In the next chapter, we'll look at borders, the
other half of the CSS3 Backgrounds and Borders module.
