Background-Image: Horizontal and Vertical Repeat

By default, the background-image property repeats an image both horizontally and vertically which could somewhat distracting, like this:

<body>
<h1>DEFAULT SETTING</h1>
<p>This is a default display of this background image, repeating horizontally AND vertically, covering the whole webpage.</p>
</body>

DEFAULT SETTING

This is a default display of this background image, repeating horizontally AND vertically, covering the whole webpage.

Some images should be repeated only horizontally. In this case, this image looks better if repeated horizontally (repeat-x):

<body>
<h1>HORIZONTAL SETTING</h1>
<p>This is set to display background image horizontally only, making one row across the horizon. With this image, the page has a nice graceful look to it</p>
</body>

HORIZONTAL SETTING

This is set to display background image horizontally only, making one row across the horizon. With this image, the page has a nice graceful look to it.

The image can be repeated vertically using repeat-y. Some some images could end up looking strange, like in this case:

<body>
<h1>VERTICAL SETTING</h1>
<p>This is set to display background image vertically only, sending repeats of the image in a single downward column.</p>
</body>

VERTICAL SETTING

This is set to display background image vertically only, sending repeats of the image in a single downward column.

The size of this image is 150 pixels square. Guess I'll have to play around with various images if I wanna have an image background, which I don't really think is a good idea, unless I was doing a website intended for children.