背景图片自适应大小(css3)

一个做后台的让写h5前端页面，这不是开国际玩笑吗，还好百度，代码贴出来

body {

            background: url(/happytime/img/index.jpg) no-repeat center center fixed; 

            background-size: 100%;//此处要注意，可以填cover也可以填100%。建议填100%

        }

 备注：折腾了俩个多小时，才解决一个bug，就在上面标注的那个需注意的地方。background-size是一个CSS3属性。原本设的置是cover，图片会填充屏幕。但是发现在360极速浏览器下左边会有1像素的白边。按照W3CShool给的值就三种：cover，contain，auto。其实这里可以填像素也可以填百分比。按理说百分比和cover是一个效果，但是在360极速浏览器里，就是差了那么一两个像素，别的浏览器都没问题。

其实准确的说是只有在360极速浏览器的极速模式里才有这个问题。

background-size的两个可选值的含义：contain是让背景图片恰好显示在容器中，图片的外边缘“顶着”容器的内边缘；而cover是覆盖容器，容器的外边缘“顶着”图片的内边缘。

另外，center是让图片居中定位，让图片的中部位于浏览器的中部。fixed使得背景不会跟随滚动条移动。