CSS 背景图片重复
CSS background-repeat
默认情况下，background-image 属性会水平和垂直重复图像。
有些图像应该只水平或垂直重复，否则会看起来很奇怪，就像这样：
如果上面的图像只水平重复（background-repeat: repeat-x;），背景会更好看：
提示：要垂直重复图像，请设置 background-repeat: repeat-y;
CSS background-repeat: no-repeat
只显示一次背景图像也由 background-repeat 属性指定：
示例
只显示一次背景图像
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
自己动手试一试 »
在上面的示例中，背景图像与文本放置在相同的位置。我们希望改变图像的位置，使其不过多干扰文本。
CSS background-position
background-position 属性用于指定背景图像的位置。
示例
将背景图像定位在右上角：
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
自己动手试一试 »
CSS 背景重复和位置属性
| 属性 | 描述 |
|---|---|
| background-position | 设置背景图像的起始位置 |
| background-repeat | 设置背景图像的重复方式 |
视频：CSS 背景重复和位置
