將div的背景拉伸到容器內部的全寬

Question

我正在使用一個網站並在中間使用960容器，現在唯一的問題是設計師在某些div s上使用了不同的背景顏色。

所以我現在的代碼是：

 <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的背景顏色s-當然只是內容div內。有什麼方法可以讓div的顏色超出內容div的範圍，並使頁面變爲全角？

這裏是工作的代碼http://jsfiddle.net/6cJVV/

Answer 1

您必須設置outter格是全寬，然後設置width: 960px; margin: 0 auto到內部的div。
請看看這個：Codepen

Answer 2

你可以這樣做：

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

它被設置爲這樣：

.object {background-size: width height;} 

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

Answer 3

我改變了我的內容到所以我可以關閉它並重新打開。我的代碼看起來像現在這樣：

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

      </div>   
     </div> 

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

      </div>  
     </div>