CSS 背景图像不重复和重复的方法background-repeat
背景图像不重复
在CSS中，当为元素添加背景图像时，当图像的大小比元素的宽度和高度构成的区域面积小的时候，默认情况下，图像将不断重复，并覆盖元素。如果在网页的设计中不想让背景图像重复，则可以使用元素的background-repeat属性，语法如下：
E{background-repeat:no-repeat}
提示：background-repeat属性不但可以设置背景图像的重复与否，而且也可以设置图像沿着x轴还是y轴方向的重复，具体可见下方的第二个实例。
CSS背景图像不重复实例代码，及在线编辑器
下方的实例中将先修改背景图像的大小，然后通过background-repeat属性设置不重复的背景图像：
<div id='d'></div>
<style>
#d{width:100%;height:100%;background-image:url("../../static/img/bmi.jpg");background-size:50px;50px;background-repeat:no-repeat;}
</style>实例代码提示
运行之后查看到的效果是背景图像并不重复，也不覆盖整个div元素。为了更好地体现不重复的特性，可以将background-repeat属性删除掉，然后再运行试一试。
CSS背景图像沿着水平和垂直方向重复
background-repeat的另外两个属性值为：repeat-x和repeat-y，分别用于设置图像水平重复和垂直重复：
实例
<div id='e'></div>
<style>
#e{width:100%;height:100%;background-image:url("../../static/img/bmi.jpg");background-size:100px;100px;background-repeat:repeat-x;}
</style>提示
运行完之后，可以将repeat-x中的x改成y，然后运行看一看垂直重复的样式。