CSS 背景重复

默认情况下，background-image属性在水平和垂直方向上重复图片。

有些图片只能水平或垂直重复，否则它们看起来会很奇怪，如下所示：

body {
background-image: url("gradient_bg.png");
}

如果上图仅水平重复（background-repeat: repeat-x;），背景会看起来更好：

body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

提示：要垂直重复图片，请设置background-repeat: repeat-y;

CSS 背景重复：不重复

仅显示一次背景图片也由background-repeat属性：

仅显示背景图片一次：

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

在上面的示例中，背景图片放置在与文本相同的位置。我们想要改变图片的位置，这样它就不会过多干扰文本。

这个background-position属性用于指定背景图片的位置。

将背景图片放置在右上角：

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

Property	Description
background-position	Sets the starting position of a background image
background-repeat	Sets how a background image will be repeated