Stretching Hintergrundbilder & Farben auf volle Breite im Skelett CSS-Framework

Question

Ich bin auf der Suche nach Hintergründen (Bilder oder Farbe), die voll mit im Browser mit dem Skeleton CSS Grid? http://getskeleton.com - Wenn Sie Skeleton herunterladen, werden Sie sehen, dass der Container ein 12-Säulen-Fluidgitter mit einer maximalen Breite von 960 Pixeln ist. Wenn Sie also ein Header-Div erstellen und ihm eine Klasse zuweisen möchten, um dieses Hintergrundbild zu ändern, bleibt es innerhalb des 960-Containers. Es wird nicht die volle Breite des Browsers gehen. Nehmen Sie den Header außerhalb des Containers, um über 960 & hinauszugehen, Sie werden das Raster brechen. Ich möchte, dass der Inhalt innerhalb des 960-Rasters bleibt, aber der Hintergrund wird bis zum Rand des Browsers gestreckt - Irgendwelche Ideen?

Answer 1

Es gibt mehrere Möglichkeiten, dies zu tun, und ohne Einschränkungen zu wissen, werde ich vorschlagen: Erstellen ein zusätzliches Element außerhalb des Behälters Klasse, die Sie entsprechend stylen können. Anstatt einen einzigen vollen Seite Container verwenden, können Sie einen Container für jeden Bereich der Website verwenden, header>container | section>container | footer>container etc ...

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

---

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

Mit dieser Methode in der Skeleton Demo verwendet wird. Werfen Sie einen Blick auf die Skeleton Demo source code, um zu sehen, wie diese Methode implementiert ist.

Answer 2

Mit einem absolut positionierten Element können Sie einen Hintergrund in ein anderes Element sortieren. Da der Master-Container position: relative hat, müssen Sie ihn mit left: 50%; und transform zentrieren. top: 0 wird die Padding-Funktion der Eltern ignorieren, aber wenn der Hintergrund nicht in die Padding erweitert werden soll, müssen Sie ihn dem Element hinzufügen, damit er mit dem übergeordneten Container übereinstimmt. width: 100vw wird es volle Breite machen, da vw Einheiten relativ zum Ansichtsfenster sind.

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