Background Properties - Background-Repeat

The following 6 pages demonstrate the background properties.

background-color | background-image | background-repeat
background-attachment | background-position | background

Rule for background-repeat.

body {background-image: url('bg-2.gif'); background-repeat: repeat-y}

The background image used for this page is bg-2.gif.

The background-repeat property has three values: repeat-y, repeat-x and no-repeat.
You see on the left margin of this page the repeat-y value. The image bg-2.gif is
repeating on the y-axis only, vertically.

This is what the image looks like without repeating.

In this red box the background image now has a new property value of repeat-x
for background-repeat. This new rule makes the image repeat on the x-axis,
horizontally.

The rule is: {background-image: url('bg-2.gif'); background-repeat: repeat-x;}

In this red box the background image now has a new property value of no-repeat
for background-repeat. This new rule makes the image display only once in the
upper-left corner of the page (or in this case the upper-left corner this box).

The rule is: {background-image: url('bg-2.gif'); background-repeat: no-repeat;}

To background-attachment