HTML and CSS Reference
In-Depth Information
max-width: 600px;
background-image: url(images/border.png);
background-repeat: no-repeat;
background-attachment: fixed;
background: #EFECCA; /* This overrides the individual background properties */
}
If you load shorthand_override.html into a browser, you'll see there's no background image at the top left
of the page. However, the image is rendered correctly if you move the shorthand property above the individual
properties like this:
body {
color: #000;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin-left: 60px;
max-width: 600px;
background: #EFECCA; /* This does not affect the individual background properties */
background-image: url(images/border.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
■
don't use
background
as quick way of adding a single value, such as color. The shorthand is great for
grouping several values, but it's easy to override existing values by mistake.
Tip
Modern browsers that support the new CSS3 background properties accept a more complex version of the
background
shorthand property. It accepts a space-separated list of values in the same way as the CSS2.1 syntax,
but with the following additions:
background-size
must be preceded by a value for
background-position
,
with the two values separated by a forward slash.
•
The value for
background-origin
and
background-clip
accept the same values (
border-
box
,
padding-box
, and
content-box
), if only one of those values is given, it applies to
both
background-origin
and
background-clip
. If two values are given, the first one sets
background-origin
, and the second
background-clip
.
•
Because
•
Separate the lists of values for multiple background images with commas, beginning with
the foremost image.
•
Only one background color is permitted. If multiple images are specified, only the final
list of values can contain a color.
Putting so many values in a single declaration makes the CSS3 version of the
background
shorthand much
more difficult to write and understand.
The styles in css3_shorthand.html contain the following example of the shorthand property:
background: url(images/yachts.jpg) center / contain no-repeat padding-box content-box #D2E1E6;
This is equivalent to the following individual properties:
background-image: url(images/yachts.jpg);
background-position: center;
background-size: contain;
