一、 相关属性：

background,background-color,background-image,background-attachment,background-position,background-repeat等

二、背景颜色

通过background-color属性来实现，该属性的值包括transparent、RGB分量、十六进制以及颜色的英文关键词。其中transparent是将背景设置为透明的，即可以显示背景下覆盖的内容

注意:

    1. color属性是设置页面文字颜色

    2. 用CSS制作背景色是，当不设置背景色时系统默认透明背景色，所以当应用颜色比较特殊又想要将其中一块设置为透明时，应当使用transparent值

          示例:
            body{
                background-color:#000000;
                 color:#FFFFFF;}
            .test_1{ baclground-color:transparent;}

    3. 在指定背景色的同时，应该指定字体颜色，否则可能导致字体不易分辨。但是同时设置背景图片和背景颜色时，正常情况下两中属性会同时生效，背景图片会置于背景颜色之上，背景颜色会通过背景图片的透明部分显示。

三、背景图片

1. 通过属性background-image来实现，直接引用图片的路径，路径可以是网站的绝对路径也可以是相对路径。在不适用别的参数时，浏览器会自动将图片覆盖整个页面

2. 注意：

    1). 图片的文件名以及后缀尽量设置为小写字母，在一些环境中大写字母表示的图片将不能显示

    2).在制作背景图片时尽量指定背景颜色，在某些环境中背景图片无法显示

 3. 示例：
    body{background-image:url(i.jpg);}

4. 常用背景图片格式：.jpg,.gif以及.png

    .gif为256色色图片，虽然颜色量上不如.jpg的丰富，但是它可以把图片背景设置为透明，并且在制作背景图片时使用一个像素宽度的图片重复是不会产生类似于.jpg压缩式所产生的色差。

四、 控制背景图片的重复：background-repeat

背景图片在默认的情况下是横向和纵向均匀重复显示的。

背景图片色重复显示属性是在背景图片是否按照一定的方式重复显示。

background-reapeat相关属性值：
    repeat：在水平方向和垂直方向均重复平铺显示（默认值）。
    repeat-x:只在水平方向上重复显示
    repeat-y:只在垂直方向上重复显示
    no-repeat:不重复显示背景图片

示例：
    body{background-image:url(56.gif) repeat-x #FFCC00；}/*设置页面整体背景图片*/

五、 固定背景图片 background-attachment

固定背景图片属性即通常所认为的“水印效果”，也就是图片是否会随着滚动条滚动二变化.

background-attachment属性的值：
    scroll：背景图片和内容一块滚动(默认值)
    fixed：背景图片不和内容一块滚动，背景图像会自动填充窗口

示例：
    body{
        background:url(ih.jpg) #FFCC00;/*设置页面整体背景图片*/
        background-attachment:fixed;/*设置页面整体背景图片的滚动显示方式*/
        color:#FFFFFF;/*设置页面整体文字颜色*/}
说明：
    此时拖动滚动条，页面内容随着滚动条改变而背景图片的位置不会发生变化。

六、 背景图片的显示位置 background-position

控制图片的显示位置是指应用精确或相对定位，使背景图片在希望的位置显示。

background-position属性的值：
    1. 关键词：top,bottom,left,right,center
    2. 单位数值：水平位置（单位数值），垂直位置（单位数值），以左上角为起点。当只指定一个值时默认为水平位置，而垂直位置就是50%的位置

 特别注意：必须将background-repeat的值设为no-repeat

示例1：
    body{
        background:url(ig.gif) right bottom no-repeate #FFFFFF;
        color:#FFFFFF;}/*设置背景图片右对齐以及位于底部的效果

示例2：
    body{
        background-image:url(ig.gif);
        background-pisition:30px 70%;
        baclground-repeat:no-repeat;
        color:#FFFFFF;}