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;

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
浏览器都支持 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>

效果图：

上篇： background-image

下篇： background-attachment