1、background 属性
background 属性负责给盒子设置背景图片和颜色，它是一个复合属性，可以分解成以下几个设置项：
- background-color 设置背景颜色
- background-image 设置背景图片地址
- background-repeat 设置背景图片如何重复平铺（repeat-x、repeat-y、no-repeat、repeat缺省值）
- background-postion 设置背景图片的位置
- background-attachment 设置背景图片是否固定还是随着页面滚动条滚动，设置值为：fixed，表示网页滚动时，背景图不动
background 属性是上面五个属性的缩写，缩写的形式性能更高，代码更简洁。
比如：background: #00ff00 url(bgimage.gif) no-repeat left center fixed
注意，除了上面的五个属性，其余的三个属性：background-size，background-origin，background-clip 是要单独写出来的。
1.1、缩写顺序
让我们看看CSS的background属性的官方定义：
Value: ['background-color'> ||<'background-image'> || <'background-repeat'>|| <'background-attachment'> ||<'background-position'>] | inherit
上面的内容只是定义的background属性的值包含那些内容，但并没有指定这些值的顺序，所以说 background 属性的值的书写顺序官方并没有强制要求。但是为了可读性和规范，一般来说 background 的缩写顺序是 background-color，background-image，background-repeat，background-attachment，background-position。
1.2、background-size中cover和contain的区别
菜鸟教程上的解释：
有点难理解，通俗解释就是：两者均以保持图像宽高比的形式缩放来适合背景容器的大小。
两者之间的区别：
在no-repeat情况下，如果容器宽高比与图片宽高比不同，
cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；
contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；
cover：意味着“遮罩、遮盖”，此处理解为“塞满”较恰当。一般来说会塞满整个容器
contain：意为“包含”，图片经过一定缩放会完整地显示在容器中，但可能不会占满整个容器。
在repeat情况下：
cover：与上述相同；contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。
要想使背景图塞满整个容器，可以使用 background-size: 100% 100%