html+css大背景布局

第一种:

使用最小宽度实现

  
内容
        .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的方法

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

 
内容
       .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中的背景为有效区的背景图

你可能感兴趣的:(html+css,html,css,大背景)