Mehrere Hintergründe: Linke Hälfte und rechte Hälfte

Hallo! Dieser Artikel ist ziemlich alt. Wir haben ihn hier überarbeitet, was viel bessere Informationen enthält.

Die Einführung der brandneuen CSS-Tricks-Foren in den letzten Tagen war großartig! Es gab Sorge, dass es eine Weile dauern würde, bis sie ankommen, aber in den letzten Tagen gab es etwa 150 Beiträge zu vielen großartigen Themen.

Eines dieser großartigen Themen war die Hintergrund-Herausforderung von John Steven

Ich stehe vor einer Herausforderung und möchte sie zum Anlass nehmen, um euch zu bitten, mich bei dieser Angelegenheit zu inspirieren. Wir brauchen einen Hintergrund, der 100% breit ist, aber auf 50% des Bildschirms ein anderes Muster aufweist. Die Idee, ein Hintergrundbild zu erstellen, das zum Beispiel 2500px breit ist und sich vertikal wiederholt, ist nicht das, wonach ich suche.

Mein erster Gedanke war, 2 divs zu erstellen, eine linke Hälfte und eine rechte Hälfte

#leftHalf {
   background: url(images/bg-1.jpg);
   width: 50%;
   position: absolute;
   left: 0px;
   height: 100%;
}
#rightHalf {
   background: url(images/bg-2.jpg);
   width: 50%;
   position: absolute;
   right: 0px;
   height: 100%;
}

Das funktioniert, hat aber ein „kleines“ (buchstäblich) Problem. Wenn die Browserfensterbreite eine ungerade Pixelzahl hat, gibt es keine gerade 50%-Teilung dieser Zahl und es entsteht ein winziger Streifen Weiß in der Mitte zwischen den beiden divs.

John selbst hat die perfekte Lösung dafür vorgeschlagen, die das Problem behebt. Anstatt einer linken Hälfte, wendet einfach dieses Hintergrundbild auf das gesamte `body`-Element an. Das löst das Problem des weißen Streifens und benötigt weniger Markup!

Demo ansehen

(Ja, das Muster der linken Hälfte passt nicht ganz richtig, aber die Theorie zählt hier!)