图片背景

一、设置背景样式(background-image)

1. 语法

background-image: url(相对路径)

2. 注意

• 如果背景图片背大于元素，默认会显示图片的左上角
• 如果背景图片和元素一样大，则会将背景图片完全显示
• 如果背景图片小于元素大小，则会将背景图片平铺以填充满元素
• 可以同时为一个元素设置背景颜色和图片，这样背景颜色将会作为图片的底色

二、background-repeat

设置背景图片的重复样式

可选值：

• repeat: 默认值，背景图片双向重复(平铺)
• no-repeat: 背景图片不会重复，有多大就显示出来
• repeat-x: 背景图片沿水平方向重复
• repeat-y: 背景图片沿垂直方向重复

三、background-position

调整图片在元素中的位置，

1. 该属性可以选择top，right，left，bottom，center中的两个值来指定背景图片的位置，例如：

bockground-position: top left;

注意：只写一个值，第二个默认值center

2. 直接指定两个偏移量，第一个是水平偏移量，第二个是垂直偏移量，例如:

bockground-position: 100px 200px;

3. background-attachment

设置背景图片是否随页面一起滚动

• scroll: 默认，会随背景图片滚动
• fixed: 当页面其余部分随页面滚动时，背景图像不会移动 

注意: 设置为fixed时，背景图片定位永远相当于浏览器的窗口，不随窗口滚动的图片，一般设置给body，不设置给其他元素