CSS1 Test Suite: 5.3.6 background-position


[Previous] [Next] [Section] [Contents] [Reference Image] [Specification]
Last Updated: 31 August 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 top;}
.two {background-image: url(bg.gif); background-position: top left;}
.three {background-image: url(bg.gif); background-position: bottom right;}
.four {background-image: url(bg.gif); background-position: 50% 50%;}


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

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.

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.

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.

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.

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

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.

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.

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.

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.


[Previous] [Next] [Section] [Contents] [Reference Image] [Specification]