## background-repeat property ## Definition and Usage The background-repeat property sets whether and how the background image is repeated. By default, the background image is repeated both horizontally and vertically. ## Browser Support All major browsers support the background-repeat property. ## Property Values | Value | Description | |-----|------| | repeat | Default. The background image will be repeated both vertically and horizontally | | repeat-x | The background image will be repeated horizontally | | repeat-y | The background image will be repeated vertically | | no-repeat | The background image will be shown only once | | space | The background image will be repeated from left to right and top to bottom, with equal spacing between images, and the first and last images are fixed to the corresponding edges of the element | | round | The background image will be repeated from left to right and top to bottom, with image size scaled according to available space to ensure there are no gaps | ## Example How to repeat the background image: ```html div { background-color:pink; background-image:url('paper.gif'); background-repeat:repeat; } ``` ## Example How to horizontally repeat the background image: ```html div { background-color:pink; background-image:url('paper.gif'); background-repeat:repeat-x; } ``` ## Example How to vertically repeat the background image: ```html div { background-color:pink; background-image:url('paper.gif'); background-repeat:repeat-y; } ``` ## Example Background image not repeated: ```html div { background-width:pink; background-image:url('paper.gif'); background-repeat:no-repeat; } ``` ## Example All background-repeat property values: ```html .ex1 { background-image: url(w3css.gif); background-repeat: repeat; } .ex2 { background-image: url(w3css.gif); background-repeat: no-repeat; } .ex3 { background-image: url(w3css.gif); background-repeat: repeat-x; } .ex4 { background-image: url(w3css.gif); background-repeat: repeat-y; } .ex5 { background-image: url(w3css.gif); background-repeat: space; } .ex6 { background-image: url(w3css.gif); background-repeat: round; }

background-repeat Property

repeat: The background image is repeated both vertically and horizontally.

no-repeat: The background-image is only shown once.

repeat-x: The background image is repeated only horizontally.

repeat-y: The background image is repeated only vertically.

space: The background image is repeated as much as possible without clipping.

round: There must be two background images, the image will resize to fill the container.

``` ## ( background-position property]( background-attachment property]( background property]( ```