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");
}
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;
}
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;
}
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;
}
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 |
