css之background-repeat的几种属性 background-repeat: 指背景图片的重复与否以及重复方式, 有no-repeat, repeat, repeat-x, repeat-y四种属性值.
no-repeat: 即无论背景图片的大小, 只显示单个背景图片, 如首页的第一篇文章标题前的”NEW”图标, 代码如上所示;
repeat: 指背景图片横向和纵向重复连续显示;
repeat-x: 指背景图片横向重复连续显示;
repeat-y 指背景图片纵向重复连续显示
如何让网页背景图片固定在一个位置不重复
解决思路：
首先要控制背景图片不重复平铺，然后控制背景的位置用background-position，控制重复的属性是background-repeat。
具体步骤：
代码示例：
<style>
body{background-image:url(demo.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:left bottom}
</style>
<script>
document.write(new Array(100).join("<br>"))
</script>
注意：必须在设置对象背景图片的有关属性前为对象指定背景图片。
技巧：注意到本例所用到的属性都是以background为前缀的，也就是说所有的属性设置都是基于background的，因此可以将本例CSS部分的代码精简如下：
body{background:url(demo.gif) no-repeat center}
象background这种CSS属性叫复合属性，类似的还有font、border、margint和padding等。
提示：background-position能控制背景图片在x轴(background-position-x，取值有left|center|right，需要IE.5.5+支持)和y轴(background-position-y,取值有top|center|bottom，需要IE.5.5+支持)上的定位,不指定y轴的值，则默认为center，另外，还可以用百分比方式指定位置。而background-repeat还可以细到指定x轴(repeat-x)或者y轴(repeat-y)上的重复与否，默认值为repeat。
试一试：把背景图片固定在页面右下角。
特别提示
代码运行后，不管窗口缩放的大小，背景图片将一直固定在左下角的位置。
特别说明
通过使用background-position和background-repeat可以精确定位页面背景。background-position属性设置容器的背景图片相对于容器的位置，脚本特性为backgroundPosition，可选值为百分数或由浮点数字和单位标识符组成的任意长度值；background-repeat属性设置容器的背景图片在X轴和Y轴方向上的平铺与否，脚本特性为backgroundRepeat。可选值见表2.1.3.1。
表2.1.3.1
background-repeat属性的可选值 可选值说明
repeat 默认值。背景图片在纵向和横向上平铺
no-repeat背景图片不平铺
repeat-x背景图片仅在X轴方向上平铺
repeat-y背景图片仅在Y轴方向上平铺