背景图片类型

1 . background-image ：设置元素的背景图片

url（“图片路径”）

背景图片默认显示的是图片的原始尺寸，如果背景图片大于元素尺寸，则只能显示图片的一部分(左上角)

注意：当图片比较小时，默认会平铺的方式铺满整个背景区域

平铺：图片会在水平和垂直两个方向上重复自己，直至背景区域填充完整

2 . background-repeat : 设置背景图片是否重复显示

当背景图片的尺寸小于元素尺寸时，背景图片会重复显示直至铺满整个元素

属性值	描述
repeat	默认值，平铺/重复出现
no-repeat	不重复
repeat-x	水平平铺
repeat-y	垂直平铺
space	保持图片的大小平铺满整个背景区域，剩余空间作为图片之间的间隙平分
round	保持图片的完整性，根据背景区域图片相对应拉伸填充

 3 . background-attachment : 设置背景图片是否固定 

背景图片是否随着页面的其他部分滚动

属性值	描述
scroll	默认值，背景图片会随着滚动条而滚动
fixed	背景图片不会随着滚动而滚动

 4 .  background-position : 设置背景图片横向纵向的位置，默认为0 0

 5 . background-size：设置背景图片的尺寸，分别表示宽和高

图片的大小仅设置一个方向，另一个方向根据图片大小自动缩放

属性值	描述
contain	根据容器的最小值设置图片，将图片进行比例缩放，图片会始终包含在容器之内，容器范围可能不被完全占用
cover	根据容器的最大值设置图片大小，将图片比例缩放至完全覆盖整个容器，图片可能会超出容器
数值	第一个值为x轴（宽度），第二个值为y轴（高度）

数值单位 ：

单位	描述
px	像素，固定的大小
%	百分比，以容器的大小作为标准进行计算
一个值	该值将作用与x轴（宽度）位置，高度为auto，此时的背景图片高度以x轴（宽度）作为参考进行比例缩放