Home >Web Front-end >CSS Tutorial >How to use background-repeat
How to use background-repeat
- 不言Original
- 2019-02-12 16:56:545114browse
We know that the background attribute is used to set the background, so how to use the background-repeat attribute? This article will introduce to you how to use the background-repeat attribute.
background-repeat attributeSets whether and how to repeat the background image, which defines the tiling mode of the image. By default, the background image repeats horizontally and vertically.
The setting of the background-repeat attribute repeats from the original image, which is defined by background-image and placed according to the value of background-position.
Note: The position of the background image is set according to the background-position property. If the background-position attribute is not specified, the image will be placed in the upper left corner of the element.
Let’s take a look at a specific example
<html>
<head>
<style type="text/css">
body
{
background-image: url(img/mouse.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>The effect is as follows: horizontal tiles, because the background-position is not set, so the image is repeated from the upper left corner.
If you want to tile vertically, you can set background-repeat: repeat-y;, and to tile from a specific position, you can set the background-position attribute.
This article ends here. For more exciting content, you can pay attention to other related column tutorials on the PHP Chinese website! ! !
The above is the detailed content of How to use background-repeat. For more information, please follow other related articles on the PHP Chinese website!