背景

1. 背景图片的设置

background-color: #0066cc; 背景颜色 没有平铺，直接铺满整个元素
background-image: url("images/timg.jpg"); 背景图片

2. 背景图片的平铺方式

background-repeat: repeat; 平铺(默认)
background-repeat: no-repeat; 不平铺
background-repeat: repeat-x; X轴平铺
background-repeat: repeat-y; Y轴平铺

3. 背景图片的位置

注意：超出元素部分的背景不会被显示
默认坐标是元素的(0, 0)

px像素
background-position: 100px 50px; 往x和y的正方向移动
background-position: -100px -50px; 往x和y的负方向移动

关键字：left right top bottom center
background-position: right top; 右上角
background-position: right bottom; 右下角
background-position: center bottom; 下居中
background-position: center center; 居中
注意：当只写一个值时，该值为x轴，y轴的值默认为center
background-position: right; 右居中
background-position: center; 上下左右居中, 等价于center center

百分比: 相对于盒子元素
background-position: 10%;

4. 背景图片的大小

background-size: 规定背景图片的尺寸
注意：只设置一个值的时候为宽度，高度默认为auto

background-size: 300px auto; 等同于
background-size: 300px;

百分比：相对于盒子元素
background-size: 50%;

关键字：cover contain
background-size: cover; 等比例缩放铺满整个元素
background-size: contain; 等比例缩放直到遇到一条边停止缩放

background-attachment: 背景依附
规定背景图片是否固定或随着页面的其余部分滚动
background-attachment: scroll; 默认
background-attachment: fixed; 固定：相对于窗口进行固定, 如果没有给background-position就是从(0, 0)坐标开始

5. 复合写法

background: #0066cc url("images/time.jpg") no-repeat center/cover fixed;
(background: 颜色 图片 平铺 位置/尺寸 依附)

6. 举例

给body背景图片

html,body{ height: 100%;} /* body和html高度100% */
body{
    background: url("images/7.jpg") no-repeat center/cover;
}