/* Keyword values */ background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat;  /* Two-value syntax: horizontal | vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; background-repeat: no-repeat round;  /* Global values */ background-repeat: inherit; background-repeat: initial; background-repeat: revert; background-repeat: unset; 

background-repeat

The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

By default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).

Syntax

/* Keyword values */ background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat;  /* Two-value syntax: horizontal | vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; background-repeat: no-repeat round;  /* Global values */ background-repeat: inherit; background-repeat: initial; background-repeat: revert; background-repeat: unset; 

Values

The one-value syntax is a shorthand for the full two-value syntax:

In the two-value syntax, the first value represents the horizontal repetition behavior and the second value represents the vertical behavior. Here is an explanation of how each option works for either direction:

Formal definition

Formal syntax

<repeat-style>#
where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}

Examples

Setting background-repeat

<ol>   <li>no-repeat     <div class="one"></div>   </li>   <li>repeat     <div class="two"></div>   </li>   <li>repeat-x     <div class="three"></div>   </li>   <li>repeat-y     <div class="four"></div>   </li>   <li>space     <div class="five"></div>   </li>   <li>round     <div class="six"></div>   </li>   <li>repeat-x, repeat-y (multiple images)     <div class="seven"></div>   </li> </ol> 

/* Shared for all DIVS in example */ ol, li {   margin: 0;   padding: 0; } li {   margin-bottom: 12px; } div {     background-image: url(starsolid.gif);     width: 160px;     height: 70px; }  /* Background repeats */ .one {   background-repeat: no-repeat; } .two {   background-repeat: repeat; } .three {   background-repeat: repeat-x; } .four {   background-repeat: repeat-y; } .five {   background-repeat: space; } .six {   background-repeat: round; }  /* Multiple images */ .seven {   background-image:  url(starsolid.gif),                      url(https://developer.mozilla.org/static/img/favicon32.png);   background-repeat: repeat-x,                      repeat-y;   height: 144px; } 

In this example, each list item is matched with a different value of background-repeat.

Specifications

See also