Background-Color über gesamte Fensterbreite trotz Holy Grail

Hallo,

ist es möglich, trotz Holy Grail einen Hintergrund über die gesamte Fensterbreite per css zu implementieren? Der Wrapper stellt aktuell immer die Begrenzung dar.

Da ich davon ausgehe das dies nicht möglich ist, eine Frage direkt hinterher:

Was wäre eine saubere Implementierung der Anforderung? Ein eigenes fe_page, indem man verschiedene Layoutbereiche definiert und den wrapper in diese hereinzieht? So kann man zumindest den Layoutbereichen einen Hintergrund über die gesamte Fensterbreite geben.

Danke und vG

body{foo:bar;} käme nicht in Frage?

Welchem Element im Speziellen willst du diesen Hintergrund geben? Allgemein gesehen könntest du es so machen:

PHP-Code:

---

<div id="outer_container">

<div id="wrapper">
...
<div class="foo">
    <div class="inside">
        /* content of foo */
    </div>
</div>
...
</div>

</div> 


---

PHP-Code:

---

#outer_container {
    width:100%;
    overflow-x:hidden;
}

.foo {
    margin-left:-200%;
    margin-right:-200%;
    padding-left:200%;
    padding-right:200%;
}

.foo .inside {
    position:relative;
} 


---

Das .inside kannst du dir sparen, wenn du nichts absolut positionieren willst in .foo, oder du dem .foo keine eigenen paddings oder borders geben musst. Die 200% beziehen sich natürlich auf die Breite des #wrapper. Wenn der #wrapper maximal 960px breit ist, ist .foo dadurch auch nur maximal 2880px breit, was aber für die meisten Anwender ausreichen sollte ;).

Beispiel: https://dl.dropbox.com/s/ce1ypcvz5zi8yzf/v1.html


Aber vielleicht hat jemand eine schönere Idee?

Hab's nochmal ein wenig revidiert. overflow-x:hidden; am body reicht eigentlich nicht, man braucht noch ein äußeres Element, dass unseren Inhalt auf 100% der Breite des Viewports abschneidet (#outer_container im code meines vorigen Posts).

Danke für die Antworten.

@lucina: leider nicht, da ich mehrere verschiedene Hintergründe auf einer Seite haben möchte.

@Spooky: Das Element an sich kann man nicht exakt definieren. Es soll "zeilenweise" geschehen, also so wie du es auch in deinem Beispiel gemacht hast. Das extra Div scheint da eine gute Idee zu sein. Somit muss ich nicht den Wrapper auseinandernehmen und laufe damit auch nicht Gefahr das ich irgendwie das Holy-Grail zerschiesse.

Falls jemand noch weitere Ideen hat sind die natürlich auch weiterhin willkommen :)

vG

Ich setze es momentan auf einer Website so um wie oben beschrieben (mehr oder weniger). Dabei gibt es auf manchen Pages der Website eben mehrere "Sektionen", die eine solche Zeile darstellen. Diese Sektionen sind dann immer in unterschiedlichen Farben. Im einfachsten Fall besteht eine Sektion aus einem Contao Artikel. Dem Artikel gebe ich dann einfach diese Klasse .foo (oder etwas sprechenderes ;), zB gray_row oder was auch immer).