background的属性

1. background-color :

这个属性用于设置一个元素的背景颜色

2. background-position :

这个属性设置背景图片的起始位置（注意对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）".）

取自 菜鸟教程 Demo

3. background-size :

这个属性指定背景图片的大小

Demo from菜鸟教程

关于cover和contain的区别（整理总结自CSDN哈姆PP）

cover 保持宽高比，铺满整个容器宽高，多出的部分会被裁切，不显示

contain 保持宽高比，缩放到图片完全展示，会有留白部分

ps:  cover意为“遮盖，覆盖物”，可以理解为"铺满"，铺满了容器多出的部分也就可以不要了；contain意为“包含，容纳”，把图片包含其中，要显示全部

cover contain

4. background-repeat : 

默认是图片会重复填满元素，沿X和Y方向填满，可以设置成单独X或Y方向 repeat-x || repeat-y；设置no-repeat则只出现一次

5. background-origin ：

这个属性指定background-position属性应该相对的位置（注意如果背景图像background-attachment是"固定"，这个属性没有任何效果 ）origin意为起源

来自 菜鸟教程

6. background-clip ：

这个属性指定背景绘制区域

来自 菜鸟教程

background-clip 与 background-origin的区别

前者是对背景图片进行裁剪，后者是对背景图片设置起始点

对于background-clip, 其关键字是指将背景图片以border的尺寸、以padding的尺寸，以content的尺寸进行切割，其得到的结果是不完整的背景，也就是其中的一部分(原理与截图差不多)。而且有一点要注意，background-clip的切割是对这个容器背景的切割(包括图片与背景颜色)。

对于background-origin，其关键字是指将背景图片放置到border范围内，padding范围内、content范围内，其得到的结果是完整的背景(原理与图片的缩放相似)。与background-clip不同的是，它只是单纯设置背景图片的边界，并不会对背景颜色造成影响。

详见   https://blog.csdn.net/linwh8/article/details/52636340

7. background-attachment ：

这个属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment:fixed 即为背景图片是固定，不随页面滚动的（可以完成不随页面滚动的背景图片效果）

8. background-image :

background-image属性设置一个元素的背景图像。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，可以使用背景色带代替。