background属性

属性介绍

background 是简写属性，在一个声明中设置所有的背景属性

<1>background-color: 规定要使用的背景颜色;

<2>background-position: 规定背景图像的位置;

<3> background-size:规定背景图片的尺寸;

<4> background-repeat:规定如何重复背景图像;

<5> background-image:把图像设置为背景;

       background-repeat 属性用于设置背景图片的平铺方向 

        参数参照表

例1

.logo{width:98%;

	  height:100px;

	  backgroud-image:url('images/logo.png');/*给容器设置背景图片 url：为图片的路径*/

	  background-repeat:repeat-x;/*设置背景图片的平铺方向为水平平铺*/
}

例2

.logo{width:30%;

	  height:294px;

	  backgroud-image:url('images/logo.png');/*给容器设置背景图片 url：为图片的路径*/

	  background-repeat:repeat-y;/*设置背景图片的平铺方向为垂直平铺*/
}
例3

.logo{width:30%;

	  height:294px;

	  backgroud-image:url('images/logo.png');/*给容器设置背景图片 url：为图片的路径*/

	  background-repeat:no-repeat;/*禁止背景图片平铺*/
}
background-position

 background-position: 规定背景图像的位置 

例1

.logo{

	  background-position:20px 30px;/*背景图片水平向右移动20像素,然后垂直向下移动30像素*/
}
例2

.logo{

	  background-position:20% 30%;/*背景图片水平向右移动父类宽度的20%,然后向下移动父类高度的30%*/
}
例3

.logo{

	  background-position:left top/*水平方向居左，垂直方向居上*/

	  background-position:right top/*水平方向居右，垂直方向居上*/

	  background-position:left bottom/*水平方向居左，垂直方向居下*/

	  background-position:right bottom/*水平方向居右，垂直方向居下*/

	  background-position:left center/*水平方向居左，垂直方向居中*/

	  background-position:right center/*水平方向居右，垂直方向居中*/
}