所以实际的结果是只能重复显示，所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来
控制背景图片的显示的。所以一般用作背景图片的有2类：
1.是一整张大图，尺寸和区域大小刚好吻合
2.一个很小的条状图，通过repeat后，形成一个很规则的大图背景。
但是css3出现以后，这个情况被改善了。background-size
属性可以让我们之前的希望成真。
而且这个属性在firefox，chrome，以及ie9上都可以使用。
具体使用方法如下：
背景图尺寸(数值表示方式)：
#background-size{
background-size:200px
100px
}背景图尺寸(百分比表示方式)：
#background-size2{
background-size:30%
60%
}背景图尺寸(等比扩展图片来填满元素，即cover值)：
#background-size3{
background-size:cover
}背景图尺寸(等比缩小图片来适应元素的尺寸，即contain值)：
#background-size4{
background-size:contain
}背景图尺寸(以图片自身大小来填充元素，即auto值)：
#background-size5{
background-size:auto
}
body {background:url(bg.jpg) top center no-repeatbackground-size:cover}这样的话背景图片就会填充整个屏幕了不过要说明的是，这是一个CSS3的属性，在很多浏览器里面都是不被支持的，你所希望的效果，目前来看，只有这个属性可以做到，否则就只能用一个足够大的图片做背景的方法来实现了。另外 background-size:cover还可以替换成 background-size:contain使用cover的意思是把背景图片充满整个容器，而不考虑是不是可以看到完整的图片；使用contain的意思是在容器里完整显示图片，而不考虑容器是否被填满。下面代码可以让css 实现body网页背景图片的拉伸效果 自动拉伸100%显示的代码，宽高自动填充。<div id="backgroundImage">
<img src="img/bodybg.jpg" />
</div>
<div id="onbackgroundbody">
</div>
<style>
html{
width:100%
height:100%
margin:0
padding:0
}
body{
width:100%
height:100%
margin:0
padding:0
}
#backgroundImage{
position: absolute
width: 100%
height: 100%
top: 0
left: 0
overflow: hidden
z-index: -1
}
#backgroundImage img{
width: 100%
height: 100%
}
#onbackgroundbody{
width: 100%
height: 100%
}
</style>
