CSS background-repeat
The background-repeat property sets if/how a background image will be repeated.
By default, a background-image is repeated both vertically and horizontally.
Some images should be repeated only horizontally or vertically, or they will look strange, like this:
Example
body {
background-image: url("gradient_bg.png");
}Live preview
CSS background-repeat Horizontally
If the image above is repeated only horizontally ( background-repeat: repeat-x; ), the background will look better:
Example
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}Live preview
Tip
To repeat an image only vertically, use background-repeat: repeat-y;
CSS background-repeat: no-repeat
Showing the background image only once is also specified by the background-repeat property:
Example
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}Live preview
In the example above, the background image is placed in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.
CSS background-position
The background-position property is used to set the starting position of the background image.
By default, a background-image is placed at the top-left corner of an element.
Example
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}Live preview
The CSS Background Repeat and Position Properties
| Property | Description |
|---|---|
| background-position | Sets the starting position of a background image |
| background-repeat | Sets how a background image will be repeated |