CSS1 Test Suite: 5.3.4 background-repeat


[Previous] [Next] [Section] [Contents] [Specification]
Last Updated: 11 May 1998

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;}


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 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.


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