スケルトンCSSフレームワークで背景画像と色を全幅に伸ばす

Question

スケルトンCSSグリッドを使用してブラウザで一杯になる背景（画像または色）を作成したいと思っていますか？ http://getskeleton.com - スケルトンをダウンロードした場合、コンテナは最大幅960ピクセルの12列の流体グリッドになります。したがって、ヘッダーdivを作成し、それにクラスを割り当ててその背景イメージを変更したい場合、それは960コンテナ内にとどまります。それはブラウザの全幅には及ばない。 960 &を越えるためにコンテナの外側のヘッダーを取ると、グリッドが破損します。私はコンテンツが960グリッド内にとどまることを望みますが、背景はブラウザの端まで伸びています - どんなアイデアですか？

Answer 1

は、これを行うには、いくつかの方法があり、そしてあなたの制限を知らなくても、私は提案します：あなたはそれに応じてスタイルすることができますコンテナクラスの外に余分な要素を作成します。単一ページ全体のコンテナを使用するのではなく、あなたは

---

HTML 
     <div class="header"> 
     <div class="container"> 
      <div class="row"> 
      <div class="twelve columns"></div> 
      </div> 
     </div> 
     </div> 

この

CSS 
     .header { 
     width: 100vw; 
     height: 25vh; 
     background-color: blue; } 

が Skeleton Demoで使用される方法です...サイト、 header>container | section>container | footer>containerなどの各セクションのための容器を使用することができます。 このメソッドの実装方法については、 Skeleton Demo source codeをご覧ください。

Answer 2

絶対配置要素を使用すると、背景を別の要素にジャムすることができます。マスターコンテナはposition: relativeなので、left: 50%;とtransformを使用してセンターコンテナにする必要があります。 top: 0は、親のパディングを無視するようにしますが、背景をパディングに拡張したくない場合は、それを親コンテナと一致するように要素に追加する必要があります。 width: 100vwは、vw単位がビューポートを基準にしているので、全幅になります。

position: absolute; 
width: 100vw; 
left: 50%; 
top: 0; 
transform: translateX(-50%); 
background: red; 
height: 100%;