Loading lesson path
Formula
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:
{
background-image: url("gradient_bg.png");
}If the image above is repeated only horizontally (
background-repeat: repeat-x;), the background will look better:
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}Formula
To repeat an image only vertically, use background - repeat: repeat - y;Formula
Showing the background image only once is also specified by the background - repeat property:Show the background image only once: 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.
Formula
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.Formula
Position the background image in the top - right corner:body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}Formula
Sets the starting position of a background image background - repeatSets how a background image will be repeated