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, like this:
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;
}
Try it Yourself »
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;
}
Try it Yourself »
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
Position the background image in the top-right corner:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Try it Yourself »
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 |
Video: CSS Background Repeat and Position
