用DIV套DIV实现水平居中布局和背景图片平铺(示例)-CFANZ编程社区

#login
       {
          width:100%;
          height:345px;
          background-color:#e2e8c4;
        }   
          
       #login div
       {
          /* background-color:Green; */
          height:345px; 
          width:1280px; 
          margin:0 auto; /*水平居中*/  
          padding-top:0px;
          background-image:url(images/login/1_08.gif);  /* 图片地址  */
          background-repeat: no-repeat;  /*  是否重复   */ 
          background-position: right bottom;
          
        }

<div id="login">

        <div>   </div>
    </div>

1、background-image:url(images/login/1_08.gif); /* 图片地址 */

2、 background-repeat: no-repeat; /* 是否重复 */

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

3、 background-position: right bottom;属性设置背景图像的起始位置

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

4、background-size 属性背景图像的尺寸

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

值	描述
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

5、background-origin 属性规定 background-position 属性相对于什么位置来定位。

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

值	描述	测试
padding-box	背景图像相对于内边距框来定位。	测试
border-box	背景图像相对于边框盒来定位。	测试
content-box	背景图像相对于内容框来定位。