背景:background，把网页的背景设为图片
width 宽;
height 高;
background-color 颜色;
background-image:url(路径);(背景图默认铺满整个容器)
background-repeat:
no-repeat不重复,repeat-x x轴重复,
repeat-y y轴重复,repeat xy都重复(默认是repeat全铺满)
background-position：背景图位置
表达方式
1英文x轴：left center right; y轴：top center bottom
2数字(x,y) eg:(30px,50px),如果是0px,则px可以省略
3数字+英文(x,y),用数字或带单位的(px % em是单位就可以用);
写一个值时，第二个值默认为center；默认位置左上
background-attachment:fixed //固定在浏览器可视区域(scroll 可以滚动,默认)
background简写
background:color url(路径) no-repeat center center fixed;
总结：
1背景不会占用窗口宽高,也不会撑开容器的宽高。(当容器没有给宽高时,看不到背景图.)所以用背景图时一定给容器宽高。(有的标签有默认宽高的除外)
eg:<p style="background:url(../img/icon.png) no-repeat 0;">你好</p>
//p的宽是屏幕宽,高被字撑开;0即left center-此处没给宽和高,因为默认有宽高
//默认字和图片摞到一起---此处理解背景不会占用窗口宽高
2当给无明确宽高的容器加背景时,把容器设为行内元素较好。
第一处给span加.
span{font-size:16px;background: url(1.png) no-repeat right 2px;padding-right: 19px;}
第二处也是给span加。
span{background: url(2.png) no-repeat 0;padding-left: 16px;}
原则：
考虑好是给块元素加还是给行内元素加
先让图和字摞一起， 然后靠padding挤过去
3如果同时有background-color和background-image,则图片image永远比颜色color层级高(即image在上面)
4当图片做为div背景时,div很小,图片大,则以div作为可视区大小---此外理解不会撑开容器宽高
eg:background-repeat与background-position应用
1.background-repeat:repeat-x;background-position:40px 0px;
//40px会往右移动40px,但空出来的部分不会是空白,会把此图片右半部分截出来40px显示出来.
2.background-repeat:repeat-x;background-position:center 0;
//图片放正中间，图片的前和后该留多少就留多少
3.background-repeat:repeat-y;background-position:0 20px;
//图片下移20px,空部分会截出该图的下部分显示
4.background-repeat:no-repeat;
//position默认是(0px,0px);(-100px,-20px)往左100px,往上20px
