1 The first background image. This is the image that is closest to the viewer. Every background image can have the general values of the background property, where the most important are background-position and background-repeat. By default they are positioned top left and get repeated at the x- and y-axis.
2 The second background image, layered under the first one.
3 The third background image which is the lowermost.
4 The general background color of the element. Can be only set last, no comma preceded.
1 The first background image is alligned horizontally right and vertically bottom. It is assumed that background-repeat is set to no-repeat to prevent it from repeating at the whole background (like all the other images in this stack).
2 The second background image, centered horizontally and vertically.
3 The third background image – by default alligned top left.
1 By default the background of a box (element) is drawn beneath the border, that is the border covers it (= border-box, default value). To change this behaviour it’s possible to use the values padding-box and content-box (Firefox 3.6 uses border and padding instead, content is not supported).
1 If a padding is set the background gets applied within it, everything outside is clipped. Same as padding-box when no padding is set, same as padding-box and border-box when no padding and no border are set.
1 When background images are applied they directly start at the outer dimensions of the containing element (= padding-box, default value). In the presence of a border they start directly within it. Can also be content-box or border-box (Firefox 3.6 uses padding, content and border).
1 The horizontal size of the background image, in this case 50% of the width of the element (not of the original image size). Can also be set in absolute (px) or relative (em) units, can be auto (original size, default), cover or contain. In combination with multiple background images the different values are separated by commas.
2Optional. The vertical size of the background image, in this case 25% of the height of containing element. If not set it is assumed to be auto.
x The live view can be examined using an element inspector like Firefox’s Firebug. Many browsers already have such an inspector build in. In each case right click on the example and then select “Inspect element”. Now an area in your browser opens where you see the HTML code of the example on the left side and the CSS on the right side for further investigation.