CSS2 Test Suite: 14.2.1 background

[index page] [section] [Previous] [Next] [Specification]

The style declarations contained within this page:

.test {background: lime;}
.cl1 {background: green;}
.cl2 {background: green url(pix/smgr-bg.gif) top center repeat-x;}
.cl3 {background: silver url(pix/crosshair.gif) center no-repeat;}
.cl4 {background: url(pix/crosshair.gif) no-repeat;}
.cl5 {background: transparent url(pix/vertical-wave.gif) center repeat-y fixed;}
.parent {background: silver url(pix/crosshair2.gif) top right repeat-x;}
.inh {background: #FCC url(pix/redsqr.gif) repeat-y;}

[test] This 'p' element should have a lime background.

[test cl1] This 'p' element should have a green background. This is distinct from a lime background.

test cl2] This 'p' element should have a green background, except along the top, where a green-grid strip should originate at the top center of the background area and repeat to both the right and the left of that point.

test cl3] This 'p' element should have a silver background and a single crosshair image at the center of the background area. This image should not tile in any direction.

test cl4] This 'p' element should have a single crosshair image at the top left corner of its background area, and the rest of the background should be transparent. If the rest of the background is lime, then the test has been failed.

test cl5] This 'p' element should have a wavy stripe down the center of its background area, and this stripe should remain stationary while the document is scrolled. In other words, the element should seem as if it is a moving window through which different parts of the wavy image are visible. In order to make the effect more obvious, extra text is appended to the content of this element in order to increase its height. Also consider resizing the browser window to be more narrow so that the element becomes taller and is (visually) pushed further down in the document.

A relevant quotation from the CSS2 specification:

'background'
Value:  [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
Initial:  not defined for shorthand properties
Applies to:  all elements
Inherited:  no
Percentages:  allowed on 'background-position'
Media:  visual

The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', 'background-attachment' and 'background-position') at the same place in the style sheet.

The 'background' property first sets all the individual background properties to their initial values, then assigns explicit values given in the declaration.

[parent] This 'div' element is the parent of another 'div' that is used to test inheritance. The parent has a silver background and a horizontal stripe of green crosshair images running along the top side of its background area, beginning in the top right corner of the background area.
[inh1] This 'div' element should have a silver background and a horizontal stripe of green crosshair images running along the top side of its background area, beginning in the top right corner of the background area, the same as its parent, as it has a style attribute set to inherit the background value. If the background is light red with a bright red vertical stripe through its center, the test has been failed.
This is the end of the parent element.
[index page] [section] [Previous] [Next] [Specification]