3.10 Backgrounds Shorthand: the ‘background’ property

Chapter 3 - Backgrounds - 3.10 Backgrounds Shorthand: the ‘background’ property

Go to the relevant page of the specification.

background-001

Background with color
Background with color only sets the background of the element to the color specified.

background-002 (image)

Background with an image
Background with image only sets the background of the element to the image specified.

background-331 (dom, script)

background shorthand - initial values
Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value

background-332 (dom, image, script)

background shorthand - all values specified
Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value, then assigns any explicit values specified for this layer in the declaration

background-333 (dom, script)

background shorthand - background-color 'red'
Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value, then assigns any explicit values specified for this layer in the declaration, and finally 'background-color' is set to the specified color, if any, else set to its initial value

background-334 (image)

background shorthand - background-size '100% auto'
Background-size with '100% auto' implies to rescale the image horizontally so that it fills the background area width and to rescale the image vertically so that it fills the background area height.

background-335 (dom, script)

background shorthand - only one value
Check if one value is present then it sets both 'background-origin' and 'background-clip' to that value

background-336 (dom, script)

background shorthand - two values
Check if two values are present, then the first sets 'background-origin' and the second 'background-clip'