CSS2 Test Suite: 14.2.1 background-position

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

The style declarations contained within this page:

.test {background-image: url(pix/smgr-bg.gif); background-repeat: no-repeat;
  border: 1px dashed gray;}
.cl1 {background-position: center;}
.cl2 {background-position: right top;}
.cl3 {background-position: bottom left;}
.cl4 {background-position: center left;}
.cl5 {background-position: center top;}
.cl6 {background-position: 50% 50%;}
.cl7 {background-position: 10px 10px;}
.cl8 {background-position: 10px 50%;}
.cl9 {background-position: 50% 10px;}
.cl10 {background-position: top 50%;}
.parent, .inh1 {background-image: url(pix/smgr-bg.gif); background-repeat: no-repeat;}
.parent {background-position: top right;}
.inh1 {background-position: center left;}

[test] This 'p' element should have a single small green image in the top left corner of its background area.

[test cl1] This 'p' element should have a single small green image in the center of its background area.

[test cl2] This 'p' element should have a single small green image in the top right corner of its background area.

[test cl3] This 'p' element should have a single small green image in the bottom left corner of its background area.

[test cl4] This 'p' element should have a single small green image in the center left of its background area.

[test cl5] This 'p' element should have a single small green image top center of its background area.

[test cl6] This 'p' element should have a single small green image in the center of its background area.

[test cl7] This 'p' element should have a single small green image whose top left corner is 10 pixels down and 10 pixels to the left of the top left corner of the background area.

[test cl8] This 'p' element should have a single small green image whose left side is 10 pixels to the right of the left side of the background area, and which is vertically centered within the background area.

[test cl9] This 'p' element should have a single small green image which is horizontally centered within the background area, and whose top side is 10 pixels down from the top edge of the background area.

[test cl10] This 'p' element should have a single small green image in the top left corner of the background area, as the value supplied is invalid and must be ignored.


[parent] This 'div' element is the parent of another 'div' that is used to test inheritance. The parent has a single green image in the top right corner of the background area.
[inh1] This 'div' element should have a single green image 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-position value. If the image appears at the center of the left side of the background area, the test has been failed.
This is the end of the parent element.

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