CSS background-repeat Property
Example
Only repeat the background image vertically:
body {
background-image: url('paper.gif');
background-repeat: repeat-y;
}
Definition and Usage
Sets how the background image of an element should be tiled.
By default, the background image is repeated both vertically and horizontally.
| Default value: | repeat |
|---|---|
| Inherited: | no |
| --- | --- |
| Version: | CSS1 |
| --- | --- |
| JavaScript syntax: | object.style.backgroundRepeat="repeat-y" |
| --- | --- |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers prefixed with -webkit-, -ms-, or -moz- indicate the first version that supported the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Internet Explorer 8 and earlier do not support multiple background images on one element.
Note: IE7 and earlier do not support the "inherit" value. IE8 requires a !DOCTYPE. IE9 supports "inherit".
Tips and Notes
Tip: The background-position property sets the starting position of the background image. If no position is specified, the image is always placed in the top-left corner of the element.
Property Values
| Value | Description |
|---|---|
| repeat | The background image will be repeated both vertically and horizontally. This is default. |
| repeat-x | The background image will be repeated only horizontally. |
| repeat-y | The background image will be repeated only vertically. |
| no-repeat | The background image will not be repeated. |
| inherit | Specifies that the background-repeat property should be inherited from the parent element. |
Live Examples
How to repeat a background image both vertically and horizontally
How to repeat a background image only horizontally
How to display a background image only once
Related Articles
CSS Tutorial: CSS Background
CSS Reference: background-position Property