<html>
<head>
<style>
body,ul,li{margin: 0; padding: 0;}
.wrap{
width: 100%;
height: 60px;
}
.img{
width: 100%;
height: 60px;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="wrap">
<div class="img"></div>
</div>
</body>
</html>
应该时背景图的大小被切割了
把fixed改为scroll
background-attachment: scroll;background-size:cover;
参见这个，比较详细：http://blog.csdn.net/yingbangwang/article/details/68068099
首先说一下，变化的原因是background-size:cover引起的，删除后背景图片不会被扩展。
然后说一下，background-size 属性，是规定背景图像的尺寸，cover属性值是把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，这个扩展是在图片的尺寸上同比例缩放，所以会导致背景图像的某些部分也许无法显示在背景定位区域中，（比如图片尺寸是400x300px，div宽高是500x300px，这时在背景属性值cover的作用下，图片的宽400px会扩展到500px，而图片的高300px是同比例缩放，所以会>300px）。
最后说一下，background-attachment属性，fixed 是固定背景图像或当DIV内容很多时，上下滚动，但背景不随着页面的其余部分滚动。（这一属性值在body填充背景时，效果最明显，如下面代码。）
<html>
<head>
<style type="text/css">
*{margin: 0; padding: 0;}
body
{
background-image:url(1.jpg);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>
<body>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
</body>
</html>