背景
由来
看到XP的经典背景，有人会认为要讲XP的内容，其实不然，我们下面讲的与XP无关，讲的是HTML页面的CSS背景基础知识。(只是借用这张经典图片，使背景不在陌生。)
一般body背景都是用大图或者图片扩展，效果无非有二，这两种方式是以前很流行的。现在，在扁平化流行的情况下，很多网站已经不使用这种大图片背景了。但是还有一些老牌网站和政府机关网站还在使用。其实实现很简单，让我们学一下吧。
说明
下文代码中使用如下目录结构
Web前端项目
├─index.html
│
├─css
│ └─style.css
│
└─res
└─背景.png
所以，CSS代码中的图片相对路径是从css文件夹下style.css开始算起的，先到上一级，再到img文件夹下。所以使用../img/这个目录。
固定背景
背景不随文本移动，例如百度背景。
- 设置背景图片
background-image:url(../img/背景.png);
- 设置背景平铺模式
一般固定背景是不平铺no-repeat的。
background-repeat:no-repeat;
- 固定背景
background-attachment:fixed;
以上三步可以在一条声明中完成：
background:url(../img/背景.png) no-repeat fixed;
不固定背景
背景随文字移动，这种背景一般使用颜色渐变的方式，使背景无限延伸。例如新浪微博背景。
- 设置背景图片
background-image:url(../img/背景.png);
- 设置背景平铺模式
简单背景一般只作成一个图片条，使用水平平铺repeat-x，把背景平铺开来。
background-repeat:repeat-x;
稍微复杂一点的背景只是在背景的开始使用一张图片。背景是不平铺的，代码如下：
background-repeat:no-repeat;
- 设置背景的颜色
因为背景不是固定的，当文本的高度超过背景图片的时候，添加背景色使背景看上去连续，所以背景图片在尾部使用渐变色处理。
background-color:#f5f5f5;
以上三步可以在一条声明中完成：
background: #f5f5f5 url(../img/背景.png) repeat-x;
