精通CSS+DIV：5，用CSS设置网页背景

一、背景颜色
1，页面背景色

body {
  background-color: #5b8a00;
}

2，使用背景色给页面分块

body {
  background-color: #ffebe5;
}
.topbanner {
  background-color: #fbc9ba;
}
.leftbanner {
  background-color: #6d1700;
}

二、背景图片
1，页面背景图

body {
  background-image: url(test.jpg);
}

2，背景图的重复

body {
  background-image: url(test.jpg);
  background-repeat: repeat-y;
}

3，背景图的位置

body {
  background-image: url(test.jpg);
  background-repeat: no-repeat;
  background-position: bottom right;
}

body {
  background-image: url(test.jpg);
  background-repeat: no-repeat;
  background-position: 30% 70%
}

body {
  background-image: url(test.jpg);
  background-repeat: no-repeat;
  background-position: 300px 25px;
}

4，固定背景图片

body {
  background-image: url(test.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

5，添加多个背景图片

body {
  background-image: url(test1.jpg);
}
div {
  background-iamge: url(test2.jpg);
}

6，背景样式综合设置

body {
  background: blue url(test.jpg) no-repeat fixed 5px 10px;
}

类似于border、font等属性，可以将多个设置集成到一个语句中以节省代码，加快网络下载速度

评论

1 楼 goagrass 2008-08-21  

CSS背景图片的设置
http://www.cssplay.org.cn/css-tutorial/20080807/632.html

CSS背景图片的运用
http://www.cssplay.org.cn/css-example/20080807/631.html

网页中CSS背景图片实现方法
http://www.cssplay.org.cn/css-tutorial/20080807/630.html