CSS background-repeat property is used to specify whether the background image should repeat or not if it is smaller than the element’s size.
The background image in the below example repeats itself horizontally because its size is lower than the element’s horizontal size.
Example:
body{
background-image: url('images/smile.png');
background-repeat: repeat-x;
}
Similarly, a background image can repeat itself vertically if its size is lower than the element’s vertical size. See the example below:
Example:
body{
background-image: url('images/smile.png');
background-repeat: repeat-y;
}
If no value is specified to the background-repeat property, it will use the default value and the background image is repeated both horizontally and vertically. See the example below:
Example:
body{
background-image: url('images/smile.png');
/* No background-repeat property specified */
}
CSS Syntax
The background-repeat property has the following syntax:
background-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;
Property Values
The background-repeat property accepts the following values:
| repeat | The background image is repeated both horizontally and vertically. This is the default. |
| repeat-x | The background image is repeated only horizontally. |
| repeat-y | The background image is repeated only vertically. |
| space | The background image is repeated in such a way that no background image is clipped and the remaining space is evenly distributed between them. |
| round | The background image is repeated in such a way that no background image is clipped and the image can shrink or stretch to cover the remaining space. |
| no-repeat | The background image is not repeated at all. |
| initial | Sets the background-repeat property to its default value(repeat). |
| inherit | Inherits the background-repeat property from the parent element. |
General Info
| Default Value | repeat |
| Inherited | No |
| JavaScript Usage | element.style.backgroundRepeat = “repeat-x” |
More Examples
If we set the background-repeat property to space, the background image is repeated in such a way that no background image is clipped and the remaining space is evenly distributed between them. See the example below:
Example:
body{
background-image: url('images/smile.png');
background-attachment: fixed;
background-repeat: space;
}
If we set the background-repeat property to round, the background image is repeated in such a way that no background image is clipped and the image can shrink or stretch to cover the remaining space. See the example below:
Example:
body{
background-image: url('images/smile.png');
background-attachment: fixed;
background-repeat: round;
}
Related Pages
CSS Tutorial: CSS Background
