当指定了背景图片之后，background-repeat属性用于指定背景图片是否在背景中重复平铺，以及背景图片重复平铺的方式。

背景图片可以设置为水平平铺，垂直平铺，同时在水平和垂直方向上平铺，或不重复，只显示一幅图片。

当背景图片在平铺的时候，如果容器的宽度或高度不足以容纳最后一幅完整的图片，那么图片会被剪裁，超出容器的部分不可见。在CSS3规范中，提供了2个新的属性值来解决最后一张背景图片被剪裁的问题。这两个属性值是：space和round。它们通过调整背景图片之间的空白区域或调整背景图片的尺寸来使背景图片尽可能的在容器中重复平铺，而且不会使最后一张图片被剪裁。

background-repeat属性可以带一个或两个属性值。这些值用于指定背景图片如何在容器中进行水平或垂直平铺。

如果只设置了一个值，那么它会被看做是设置2个值语法的简写方式，第二个值由浏览器来决定。如果设置了2个值，那么第一个值用于水平方向，第二个值用于垂直方向。

如果设置了多个背景图片，那么可以使用background-repeat属性来为每一个背景图片分别设置是否平铺，各个属性值之间使用逗号来分隔，并且和背景图片一一对应。

官方语法

background-repeat: <repeat-style> [ , <repeat-style> ]*

/* 其中 */

<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}                      
                            

参数：

• repeat-x：背景图片在水平方向上重复平铺。
• repeat-y：背景图片在垂直方向上重复平铺。
• repeat：默认值。背景图片同时在水平和垂直方向上进行重复平铺。
• space：图像会尽可能得重复平铺, 但是不会裁剪. 第一个和最后一个图像会被固定在容器相应的边上，同时背景图片之间的空白会均匀的分布在图片之间。属性会被忽略，除非只有一个图片能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图片太大了以至于没有足够的空间来完整显示一个图片。
• round：背景图片的尺寸会随着容器的尺寸的增长而增长，直到有足够的空间来添加一个图片。当下一个图片被添加后, 所有的当前的图片会被压缩来腾出空间。例如, 一个图片原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图片被加进来. 这样它们就可能被压缩到225px。
• no-repeat：背景图片不会重复。背景图片的位置由属性来决定。

background-repeat属性的初始值为repeat。

例如：

/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 双值语法: 水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;                              
                            

示例代码

下面的代码将背景图片使用属性居中，然后使背景图片在垂直方向上重复平铺。

.element {
    background-image: url(image.png);
    background-position: center center;
    background-repeat: repeat-y;
}                              
                            

下面是多重背景的例子，第一个背景图像会在水平方向上重复平铺，第二个背景图像会在垂直方向上重复平铺。

.element {
    background-image: url(image1.png), url(image2.png);
    background-repeat: repeat-x, repeat-y;
}                              
                            

在线演示

第一个DEMO使背景图片在垂直方向上重复平铺，并位于容器居中。超出容器的背景图片会被剪裁。

第二个DEMO使背景图片在水平和垂直方向上重复平铺。

第三个例子中，背景图片不重复，并使用属性使背景图片位于容器居中。

第四个例子演示space的效果。在这个demo中，设置了background-repeat : space no-repeat，这时，水平方向上背景图片会重复平铺，但是不会被剪裁，它通过调整背景图片之间的间隙来实现。垂直方向上背景图片不重复。（你的浏览器可能看不到这个效果）

第五个例子演示了round的效果。在这个demo中，设置了background-repeat : no-repeat round，这时，水平方向上背景图片不重复，垂直方向上背景图片会重复，但是不会被剪裁，它通过调整背景图片的尺寸来实现。（你的浏览器可能看不到这个效果）

适用范围

background-repeat属性可以使用在所有元素上。

浏览器支持

所有的现代浏览器都支持background-position属性，包括：Chrome, Firefox, Safari, Opera, IE浏览器以及Android和iOS系统浏览器。

round和space目前只有IE 9+、Opera 10.5+和Chrome浏览器才支持。