html+css大背景布局

第一种:

使用最小宽度实现

  <div class="box">
        <div class="main">内容</div>
  </div>

        .box{
            width: 100%;
            min-width: 960px;
            background: url(images/sec1bg.jpg) no-repeat center;
        }
        .main{
            width: 960px;
            height: 796px;
            background: #ccc;
            margin: auto;
        }

其中,box为整个页面,main为有效区. 实现的关键点是为box加最小宽度为有效区的宽度

 

第二种:  使用大banner的方法

将背景切成两部分,中间有效区为一个背景图,两边的背景为一个背景图(把中间的留白),具体实现代码:

 <div class="box">
    <div class="main">内容</div>
 </div>

       .box{
            width: 100%;
            background: url(images/sec1-1.jpg) no-repeat center;
        }
        .main{
            width: 960px;
            height: 796px;
            background: url(images/sec1main.jpg) no-repeat;
            margin: auto;
        }

其中box中的背景图为中间留白的那张,main中的背景为有效区的背景图