CSS background-repeat Property
Description
The background-repeat
property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both, or not repeated at all.
- Initial value
- repeat
- Applies to
- All elements
- Inherited
- No
- Media
- Visual
- Computed value
- A list, each item consisting of: two keywords, one per dimension
- Animatable
- No
- CSS Version
- CSS1, CSS2, CSS3
- JavaScript syntax
- object.style.backgroundRepeat
Syntax
background-repeat: <repeat-style> [ , <repeat-style> ]*
Values
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}- repeatThe image is repeated horizontally and vertically. In CSS3, if two keywords are used, the image is repeated along the relevant axis.
- repeat-xThe image is repeated along the horizontal axis.
- repeat-yThe image is repeated along the vertical axis.
- no-repeatThe image is not repeated.
- spaceThe image is repeated as often as will fit into the background area a whole number of times, and is spaced out so that the first and last ones touch the edges. (CSS3)
- roundThe image is repeated as often as will fit into the background area, and is rescaled if necessary to make it fit a whole number of times. (CSS3)
- inherit
Example
<div style="height:1000"> </div>
body {
background-image: url(images/icon2.png);
background-position: right;
background-repeat: repeat-y;
}
Give it a Try
Click the button below to experiment with this property.
Browser Support
Desktop | |||||
4 | 12 | 1 | 1 | 3.5 | 1 |
Tablets / Mobile | |||||
![]() |
|||||
1 | 18 | 4 | 10.1 | 1 | 1.0 |
Last updated by CSSPortal on: 20th October 2019