Background Repeat
CSS background-repeat
An image is automatically repeated both vertically and horizontally by the background-image attribute.
Certain images, like this one, should only be duplicated vertically or horizontally to avoid weird visual effects.
Example
body {
background-image: url("gradient_bg.png");
}
The background will appear better if the preceding image is merely repeated horizontally (background-repeat: repeat-x;).
Example
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Note: To repeat an image vertically, set background-repeat: repeat-y;
CSS background-repeat: no-repeat
The background-repeat attribute also specifies that the background image should only be displayed once:
Example
Show the background image only once:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
The background image and text are positioned in the same spot in the example above. In order to avoid overly disturbing the text, we would want to move the image.
CSS background-position
The background image’s location can be specified using the background-position attribute.
Example
Position the background image in the top-right corner:
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 |
