设置背景图片的大小，以长度值或百分比显示（数值包括 长度length和百分比percentage），还可以通过cover和contain来对图片进行伸缩。

         语法：background-size: auto | | | cover | contain

                 bg-size = [ | | auto ]{1,2} | cover | contain

并且会根据背景原点位置 background-origin 设置其图片覆盖的范围。

取值说明：

1、auto：默认值，不改变背景图片的原始高度和宽度；

     length，percentage，根据给定长度值或者百分比来调整背景图片大小，第一个值为设置图片宽度，第二个值为图片的高度，但是不管是用什么值，都不能为负值；

               这三个值最小可重复一次，最大重复两次。

假如只给定一个值，那么第二个自动的为 'auto'；假如指定为 percentage百分比值，那么背景图大小是根据相对的背景区域来做调整，这个背景区域是由background-origin来来决定的。这里有必要提到 假如background-attachment:fixed，那么其背景相对区域就是初始包含块也就是视窗。

2、：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

3、：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

按比例调整背景图片，这个属性值跟contain正好相反，背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话，那么背景图片就会被咔嚓。

 当使用了 cover 这个值的时候，那么正好就跟contain相反，其会正好覆盖整个背景相对区域，但是背景图片的某些部分就看不见，如下图的狗的下半身和右侧身体显示不全。

例如2：

　　 　　背景图片大小 　　 　　　　.demo {

　　　　　　background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat; 　　　　　　width: 300px; 　　　　　　height: 140px; 　　　　　　border: 1px solid #999; 　　　　　　background-size:cover; 　　　　} 　　 　　 　　

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

contain，按比例调整背景图片，使得其图片宽高比自适应整个元素的背景区域的宽高比，因此假如指定的图片尺寸过大，而背景区域的整体宽高不能恰好包含背景图片的话，那么其背景某些区域可能会有空白。看以下代码

假如说只是拿单一的数值或者具体数值来解释那理解起来应该不难，但假如用混合长度来说，可能会有点一下子明白不上来。

规范给了几个例子，不妨拿出来一下：先声明，所以的元素尺寸为 100*100

       在MND帮助文档中还提到了关于火狐的渐变图片背景问题，不过那是涉及到Firefox8，规范中不推荐同时使用px和auto，因为在8以前的火狐浏览器不支持重复渲染，但是我在caniuse上看见的版本是31+，so，你就尽情的用吧。并且对于移动浏览器的支持还是非常的好的，请看下图可知，除了opera8部分不支持以外：

目前用到 background-size的场景都是基于webapp的背景图上，大致的情况是，比如说最常见的logo作为某个元素的背景，但logo很复杂，假如说我们按照设计图上的去切片的话，那会有两种可能：1、按照csser的分辨率去切片，比如高度为50px，logo被直接缩放到50px那就会很别扭，而且估计那那画面太美，你都不敢看；2、按照射击湿设计的分辨率去切的话，有可能设计图的logo尺寸会很大，但是我们csser写的时候高度只有50px，那logo就会显示不全；

这时候background-size就发挥其重要的作用了，我们可以通过对背景图片大小的自适应缩放，而不会影响到起美观性又能全部显示我们所需要的效果。