Controlling Background Image Repetition Using CSS

CSS allows webmasters to easily control if and how background images repeat themselves throughout their HTML documents. This is done using the background-repeat style definition.

Images can be set to repeat indefinately, not repeat at all, or repeat only vertically or horizontally.

Let's take a look at the background repetition CSS style settings.

p	{background-repeat:norepeat;}
ul	{background-repeat:repeat;}
ol	{background-repeat:repeat-x;}
h1	{background-repeat:repeat-y;}

CSS background-repeat are easy to remember. Our first example p {background-repeat:norepeat;} would have one image placed behind our paragraph elements. The image would not repeat at all thanks to the norepeat designation.

The setting background-repeat:repeat sets a background image to tile repeatedly (think a tile floor) behind the element, both horizontally and vertically.

background-repeat:repeat-x repeats the image like a chain horzontally only (not vertically) throughout the element. The X in the command stands for the X axis.

Likewise, background-repeat:repeat-y stands for the Y axis. This image repeats in a chain vertically only (not horizontally) throughout the element.

You should now be able to use CSS to set your background images to repeat horizontally, vertically, both horizontally and vertically, or not at all.