The background-repeat CSS property specifies whether a background image should be repeated vertically and or/horizontally, or not repeated. If the element has multiple background images, each can have its own repetition rule. The repeating starts from the position set by background-position.
background-repeat: repeat-x; background-repeat: repeat-x, no-repeat; /* two images, different setting */
repeat-x repeats horizontally; repeat-y vertically and repeat in both directions as default. Separate values with commas when there are multiple background images with different repetition rules. If you give a single value, it will be applied to all the images.
Browser Support: Full.
Multiple Background Images
Here's an example of background-repeat being used with multiple background images. Thirsty?
The reference position where CSS starts repeating is given by background-position. There's no way to repeat a background a limited number of times, other than playing with the size of the element and image.
You have sure seen than most background images look terrible when repeated. The image must have the same start and end in the direction of repetition:
Most web texture/pattern websites have repeatable backgrounds for download and inspiration. Here, are a couple of great sites:
space and round values
The CSS3 Specification (Working Draft) adds two possible values for background-repeat: space and round. The support for these values was almost non-existent at the time of writing.
- space repeats the image enough times to fill the background positioning area (set by background-origin) without clipping. It then spaces the images evenly to fill the background.
- round is roughly the same but it scales the images insted of spacing them.