Use the same image repeatedly
background-repeat
![](/img/style/background/background-repeat.png)
Use the same image over and over until the entire element's background is filled.
Property values
When a small image is used in a background it can be used repeatedly to fill up the space, or used just once.
Specify a pair of these keywords, one for the horizontal rule, and one for the vertical rule:
no-repeat | Use the image just once |
repeat | Use the image repeatedly |
space | Use the image repeatedly, leaving spaces between evenly distributed copies of the image |
round | Use the image repeatedly, scaling the image to make it perfectly fit the size of the element |
When only one keyword is used, it is applied as both the horizontal and vertical rule. Use these keywords instead to apply only one of the rules
repeat-x | Use the image repeatedly in the horizontal direction only |
repeat-y | Use the image repeatedly in the vertical direction only |
Examples
/* repeat the image horizontally, with spaces in between */
background-repeat: space no-repeat;
/* repeat the image vertically, scaling the image to fit the full height of the element */
background-repeat: no-repeat round;
/* repeat the image horizontally and vertically, without scaling and without spaces */
background-repeat: repeat;