The following div uses the background shorthand to set three background images to illustrate the CSS box model. All values are specified even if they are the same as the default to illustrate how they are specified in the shorthand. The new values added to the shorthand to make it compliant with the CSS3 Backgrounds and Borders specification are background-size, background-clip and background-origin.
The background property was specified as follows:
background: url("content.svgz") no-repeat left top / 200px 70px scroll content-box content-box,
url("padding.svgz") no-repeat left top / 240px 110px scroll padding-box padding-box,
url("border.svgz") no-repeat left top / 280px 150px scroll border-box border-box white;
The values are from left to right: background-image, background-repeat, background-position (horizontal vertical), background-size (X Y), background-attachment, background-origin, background-clip and background-color. Only the final background image can specify a background-color.
The diagram above was inspired by Russ Weakley’s box model illustration. If you do not see a diagram above your browser does not support the full CSS3 background property. Try with the latest version of Opera.
To find out more about the background shorthand and other CSS3 Backgrounds and Borders properties visit the Dev.Opera article CSS3 borders, backgrounds and boxes.