O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

background-repeat

Values:

<bg-repeat-style> [ , <bg-repeat-style> ]*

Expansions:

<bg-repeat-style>

repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

Initial value:

repeat

Applies to:

All elements

Inherited:

No

Computed value:

Same as declared value

Description:

Defines the tiling pattern for one or more background images. The repetition begins from the origin image, which is defined as the value of background-image and is placed according to the value of background-position (and possibly background-origin). For the keywords space and round, the image is tiled as many times as it will fit in the background area without being clipped and then the first and last images are placed against their respective background edges. The difference is that space causes the intervening images to be regularly spaced, and round causes them to be stretched to touch each other. Note that repeat-x is equivalent to repeat no-repeat, and repeat-y is equivalent to no-repeat repeat.

Examples:

body {background-repeat: no-repeat;}
h2 {background-repeat: repeat-x, repeat-y, space;}
ul {background-repeat: repeat-y, round space, repeat;}

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required