HTML and CSS Reference
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:
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
background: #EFECCA; /* This does not affect the individual background properties */
■ 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.
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 .
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: