将div的背景拉伸到容器内的全宽度

时间:2013-01-02 13:03:50

标签: html css

我正在网站上工作并在中间使用960容器,现在唯一的问题是设计师在某些div上使用不同的背景颜色。

所以我现在的代码是:

      <div id="content">
<!-- the content needs to 960 on the width only the background need the full width of the page -->
             <div class="whitebackground">
                     <!-- content -->
             </div>

             <div class="bluebackground">
                     <!-- content -->
             </div>
        </div>

css:

#content {

margin: 0px auto;
min-height: 700px;
position: relative;
width: 960px;

}
.whitebackground{
    width: 100%;
    background:#FFF;
}
.bluebackground{
    width: 100%;
    background:#0054fe;
}

现在问题是div的背景颜色当然只在内容div内。有没有办法让div的颜色超出内容div并超出页面的宽度?

以下是工作代码http://jsfiddle.net/6cJVV/

3 个答案:

答案 0 :(得分:3)

你可以这样做:

.object {background-size: 100% 100%;}

设置如下:

.object {background-size: width height;}

http://www.w3schools.com/cssref/css3_pr_background-size.asp

答案 1 :(得分:1)

您必须将外部div设置为全宽,然后将width: 960px; margin: 0 auto设置为内部div 看看这个:Codepen

答案 2 :(得分:0)

我将内容更改为一个类,因此我可以将其关闭并重新打开。我的代码现在看起来像这样:

      <div class="whitebackground">
          <div class="content">

          </div>          
      </div>

      <div class="bluebackground">
             <div class="content">

             </div>       
       </div>