CSS Background Image Repeat
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
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
Show the background image only once:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
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
Position the background image in the top-right corner:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
