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.