The style declarations which apply to the text below are:
.one {background-image: url(redsqr.gif); background-repeat: repeat-y;}
.two {background-image: url(redsqr.gif); background-repeat: repeat-x;}
.three {background-image: url(redsqr.gif); background-repeat: no-repeat;}
.four {background-image: url(bg.gif); background-position: 50% 50%; background-repeat: repeat-y;}
.five {background-image: url(crosshair2.gif); background-position: 50% 50%;
background-color: red;}
This sentence should have a red stripe repeated in the "y" direction, starting at the upper left corner (since the default for background-position is '0% 0%' and that property is not declared here). This is extra text included for the sole purpose of making the paragraph longer. Thank you for your understanding.
This sentence should have a red stripe repeated in the "x" direction, starting at the upper left corner (since the default for background-position is '0% 0%' and that property is not declared here). This is extra text included for the sole purpose of making the paragraph longer. Thank you for your understanding.
This sentence should have a single red square behind it, placed at the upper left corner (since the default for background-position is '0% 0%' and that property is not declared here). This is extra text included for the sole purpose of making the paragraph longer. Thank you for your understanding.
This sentence should have a green-hatch stripe running vertically down the center of the paragraph, with the origin image exactly centered in the paragraph. This is because repeat-y specifies tiling in both directions on the y-axis. Note that this test is only valid if the user agent supports background-position (see test 5.3.6). I'll fill the paragraph with extra text to make the conformance (or lack thereof) more obvious.
This paragraph should have a tiled background, with the origin image exactly centered in the paragraph. This is because background-repeat specifies tiling in all directions, regardless of the position of the origin image. Note that this test is only valid if the user agent supports background-position (see test 5.3.6). I'll fill the paragraph 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 has not bee correctly tiled.
|
This sentence should have a red stripe repeated in the "y" direction, starting at the upper left corner (since the default for
This sentence should have a red stripe repeated in the "x" direction, starting at the upper left corner (since the default for
This sentence should have a single red square behind it, placed at the upper left corner (since the default for
This sentence should have a green-hatch stripe running vertically down the center of the paragraph, with the origin image exactly centered in the paragraph. This is because
This paragraph should have a tiled background, with the origin image exactly centered in the paragraph. This is because |