CSS1 Test Suite: 5.3.6 background-position


[Previous] [Next] [Section] [Contents] [Specification]
Last Updated: 8 September 1998

The style declarations which apply to the text below are:

BODY {background-image: url(bg.gif); background-position: right top;
      background-repeat: no-repeat;}
.one {background-image: url(bg.gif); background-position: center;
      background-repeat: no-repeat; background-color: aqua;}
.two {background-image: url(bg.gif); background-position: 50% 50%;
      background-repeat: no-repeat; background-color: aqua;}
.three {background-image: url(bg.gif); background-position: bottom right;
        background-repeat: no-repeat; background-color: aqua;}
.four {background-image: url(bg.gif); background-position: 100% 100%;
       background-repeat: no-repeat; background-color: aqua;}
.five {background-image: url(bg.gif); background-position: 0% center;
       background-repeat: no-repeat; background-color: aqua;}
.six {background-image: url(crosshair2.gif); background-position: center top;
      background-color: red;}
.seven {background-image: url(crosshair2.gif); background-position: top left;
        background-color: red;}
.eight {background-image: url(crosshair2.gif); background-position: bottom right;
        background-color: red;}
.nine {background-image: url(crosshair2.gif); background-position: 50% 50%;
       background-color: red;}


This document should have a single, small green image in its upper right corner.

This paragraph should have a single, small green image exactly in its center; that is, the center of the image should be fixed at the center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center.

This paragraph should have a single, small green image exactly in its center; that is, the center of the image should be fixed at the center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center.

This paragraph should have a single, small green image in its lower-right corner; that is, the lower right corner of the image should be fixed at the lower right corner of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to see its corners.

This paragraph should have a single, small green image in its lower-right corner; that is, the lower right corner of the image should be fixed at the lower right corner of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to see its corners.

This paragraph should have a single, small green image exactly at the left center; that is, the left center of the image should be fixed at the left center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center.

This sentence should have a fully tiled background which starts at its center top; that is, the background's origin should be the exact center of the top of the paragraph. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly.

This sentence should have a fully tiled background which starts at its top left. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly.

This sentence should have a fully tiled background which starts at its bottom right; in other words, a complete instance of the image should be anchored in the bottom right corner, with the tiled background extending out from there. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly.

This sentence should have a fully tiled background which starts at its center and is tiled in all directions; that is, the background's origin should be the exact center of the paragraph. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. In fact, a lot of extra text will be necessary to make this at all obvious. This is true because I am not able to increase the text size without resorting to either headings or other CSS properties, neither of which I want to use in this circumstance. This ought to be enough text, though. A background color is present, although if it is visible, then the image may not have been tiled correctly.

This document should have a single, small green image in its upper right corner.

This paragraph should have a single, small green image exactly in its center; that is, the center of the image should be fixed at the center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center.

This paragraph should have a single, small green image exactly in its center; that is, the center of the image should be fixed at the center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center.

This paragraph should have a single, small green image in its lower-right corner; that is, the lower right corner of the image should be fixed at the lower right corner of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to see its corners.

This paragraph should have a single, small green image in its lower-right corner; that is, the lower right corner of the image should be fixed at the lower right corner of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to see its corners.

This paragraph should have a single, small green image exactly at the left center; that is, the left center of the image should be fixed at the left center of the paragraph. The background color will make it easier to determine the edges of the paragraph, and therefore allow you to calculate its center.

This sentence should have a fully tiled background which starts at its center top; that is, the background's origin should be the exact center of the top of the paragraph. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly.

This sentence should have a fully tiled background which starts at its top left. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly.

This sentence should have a fully tiled background which starts at its bottom right; in other words, a complete instance of the image should be anchored in the bottom right corner, with the tiled background extending out from there. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly.

This sentence should have a fully tiled background which starts at its center and is tiled in all directions; that is, the background's origin should be the exact center of the paragraph. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. In fact, a lot of extra text will be necessary to make this at all obvious. This is true because I am not able to increase the text size without resorting to either headings or other CSS properties, neither of which I want to use in this circumstance. This ought to be enough text, though. A background color is present, although if it is visible, then the image may not have been tiled correctly.


[Previous] [Next] [Section] [Contents] [Specification]