background：有以下几种属性：

background-color

background-position

background-size

background-repeat

background-origin

background-clip

background-attachment

background-image

background-color：#fff。

background-position：属性设置背景图像的起始位置。

1.有left,top,right,bottom,center五个值组合显示位置。如果只写第一个，第二个省略默认center。

2.x% y%:第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。

3.Xpx Ypx: 第一个值是水平位置，第二个值是垂直位置。

background-size:规定背景图像的尺寸

1.length:设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

2.percentage:以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

3.cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

4.contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background-repeat:规定如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。

1.repeat-x,repeat-y 背景图像将在水平方(垂直)向重复。

2.no-repeat：不重复。

3.inherit:规定应该从父元素继承 background-repeat 属性的设置。

background-origin: 规定背景图片的定位区域。

1.padding-box:背景图像相对于内边距框来定位。

2.border-box:背景图像相对于边框盒来定位。

3.content-box:背景图像相对于内容框来定位。

background-clip:规定背景的绘制区域。背景被裁剪到什么位置，和origin属性相似

1.padding-box:背景图像被裁剪到内边距内部。

2.border-box: 背景图像被裁剪到边框内部。

3.content-box:背景图像被裁剪到内容框内部。

background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。

1.scroll：默认值。背景图像会随着页面其余部分的滚动而移动。

2.fixed：当页面的其余部分滚动时，背景图像不会移动。

3.inherit:规定应该从父元素继承 background-attachment 属性的设置。

background-image:路径，简单。

background-image:url('xxxx')

例如 1图片等比缩放 直到 完全填充div 

width: 300px;

height: 100px;

background-color: red;

background-image: url('https://pics3.baidu.com/feed/7acb0a46f21fbe09b2ba58f8536c8a378644ad03.jpeg?token=297cc5f18e7c40c3369d86db0cbc2a0d&s=AF2069854403AEF80489148F0300F083');

background-position: center;

background-size: cover;

例如 2图片等比缩放 直到 完全在div完整显示 

width: 300px;

height: 100px;

background-color: red;

background-image: url('https://pics3.baidu.com/feed/7acb0a46f21fbe09b2ba58f8536c8a378644ad03.jpeg?token=297cc5f18e7c40c3369d86db0cbc2a0d&s=AF2069854403AEF80489148F0300F083');

background-position: center;

background-size: contain;

background-repeat: no-repeat;