在CSS中，我们可以使用background-repeat属性来定义背景图片的重复方式。

语法：

background-repeat: 取值;

说明：

background-repeat属性取值有4个，如下表所示。

表1 background-repeat属性取值
属性值 说明
repeat 在水平方向和垂直方向上同时平铺（默认值）
repeat-x 只在水平方向（x轴）上平铺
repeat-y 只在垂直方向（y轴）上平铺
no-repeat 不平铺

下面先来看一个例子：我们有一张25px * 25px的小图片（如下图所示），然后通过3个div来设置不同的background-repeat属性取值，看看实际效果如何。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:200px;
            height:100px;
            border: 1px solid silver;
            background-image: url(img/flower.png);
        }
        #div2{background-repeat: repeat-x}
        #div3{background-repeat: repeat-y}
        #div4{background-repeat: no-repeat}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

在这个例子中，第1个div元素由于没有定义background-repeat属性值，因此会采用默认值repeat。

此外还需要注意一点，元素的宽度和高度必须大于背景图片的宽度和高度，才会有重复效果。这个道理，小伙伴们稍微想一下就明白了。