CSS background-repeat

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|repeat-x|repeat-y|no-repeat
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?

div.example {
background-color: white; background-image: url('watermelon.png'), url('picnic.png'); background-repeat: repeat-x, repeat; background-position: center;
}

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.

Repeatable Backgrounds

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:

And a great tutorial on how to create repeating backgrounds in Photoshop.

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.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>