CSS背景图设置

一、背景图设置
使用背景图片，设置为全屏
方式1：全部使用background设置

    body{
            background-image: url(bg.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

背景图片
背景尺寸
背景图是否重复
背景是否滚动
方式2：使用宽高

        body {
            width: 100%;
            height: 100%;
            background: url(img/bg.jpg) no-repeat;          
        }

方式3：使用边距

        body {
                padding: 0;
                margin: 0;
                background: url(img/bg.png);
        }

CSS背景知识点

1、background-color -- 背景色,定义背景的颜色

<color>: 颜色表示法
transparent: 透明
inherit: 继承

2、background-image -- 定义背景图片

<uri>: URI
none: 无

3、background-repeat -- 定义背景图片的重复方式

repeat: 平铺整个页面,左右与上下
repeat-x: 在x轴上平铺,左右
repeat-y: 在y轴上平铺,上下
no-repeat: 图片不重复

4、background-position -- 定义背景图片的位置

1、水平
left: 左
center: 中
right: 右
2、垂直
top: 上
center: 中
bottom: 下
3、垂直与水平的组合
x-% y-%
x-pos y-pos
inherit: 继承

p { 
    background-image:url('list-orange.png');
    background-position:right bottom ;
    background-repeat:no-repeat;
}   
div { 
    background-image:url('list-orange.png');
    background-position:50% 20% ;
    background-repeat:no-repeat;
}

5、background-attachment -- 定义背景图片随滚动轴的移动方式

取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承
初始值: scroll