background-repeat

background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

示例

background-repeat: repeat-x;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
background-repeat: space repeat;

浏览器支持


浏览器都支持`background-repeat`

语法：

background-repeat：repeat-x | repeat-y |[repeat | no-repeat | space | round]

取值：

repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺
repeat：背景图像在横向和纵向平铺
no-repeat：背景图像不平铺
round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）
space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）

说明：

设置或检索对象的背景图像如何铺排填充。必须先指定<background-image>属性。

允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。
如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeatno-repeat，repeat-y相当于no-repeatrepeat，即其实repeat-x和repeat-y等价于提供了2个参数值
对应的脚本特性为backgroundRepeat。

默认值	repeat
适用于	所有元素
继承性	无
动画性	否
计算值	指定值

取值

<repeat-style>

单值语法是完整的双值语法的简写:

单值	等价于双值
`repeat-x`	`repeat no-repeat`
`repeat-y`	`no-repeat repeat`
`repeat`	`repeat repeat`
`space`	`space space`
`round`	`round round`
`no-repeat`	`no-repeat no-repeat`

在双值语法中，第一个值表示水平重复行为，第二个值表示垂直重复行为。下面是关于每一个值是怎么工作的具体说明:

`repeat`	图像会按需重复来覆盖整个背景图片所在的区域。最后一个图像会被裁剪，如果它的大小不合适的话.
`space`	图像会尽可能得重复，但是不会裁剪。第一个和最后一个图像会被固定在元素(element)的相应的边上，同时空白会均匀地分布在图像之间.`background-position`属性会被忽视，除非只有一个图像能被无裁剪地显示。只在一种情况下裁剪会发生，那就是图像太大了以至于没有足够的空间来完整显示一个图像.
`round`	随着允许的空间在尺寸上的增长，被重复的图像将会伸展(没有空隙),直到有足够的空间来添加一个图像。当下一个图像被添加后，所有的当前的图像会被压缩来腾出空间。例如，一个图像原始大小是260px,重复三次之后，可能会被伸展到300px,直到另一个图像被加进来。这样他们就可能被压缩到225px. 译者注：关键是浏览器怎么计算什么时候应该添加一个图像进来，而不是继续伸展.
`no-repeat`	图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖).那个没有被重复的背景图像的位置是由`background-position`属性来决定.

<!DOCTYPE html>
<html>
<head>
<style>
p{width:200px;
	height:100px;
	background-image:url("images/bird.png");
	background-repeat:no-repeat;
	}
div{
	width:200px;
	height:150px;
	background-image:url("images/bird.png");
	background-repeat:repeat-y;

}
</style>
</head>
<body>
	<h3>图片不重复:</h3>
		<p></p>
	<h3>图片沿y轴重复:</h3>
	<div></div>
</body>
</html>

效果图：