Ganz schön hintergründig

Das Background- und Border-Modul von CSS3

Viele neue Tricks und Effekte sind mit dem in CSS3 definierten Hintergrund- und Bordermodul möglich, das inzwischen von allen aktuellen Browsern unterstützt wird.

Das Rahmen- und Hintergrundmodul von CSS3 ist relativ stabil. Es befindet sich im Status „Last Call“, der nächste Schritt ist dann die „Candidate Recommendation“. Und es bietet eine Fülle an neuen Optionen – weit mehr als nur borderradius –, welche die Arbeit mit CSS vereinfachen und richtig Spaß machen.

Mehr ist besser

Eine zentrale Regel in CSS 2.1 besagt, dass pro Element nur ein einziges Hintergrundbild möglich ist. Für manche Effekte braucht man jedoch mehrere Hintergrundbilder – beispielsweise bei der Sliding-Door-Technik für Tabs oder auch beim Parallax-Effekt. Das bedeutet: tief verschachtelte div-Container.

Mit CSS3 hat sich das erübrigt: Sie können einem Element beliebig viele Hintergrundbilder zuweisen. Hierfür schreiben Sie die Hintergrundbilder in der üblichen Syntax mit url(), zwischen die einzelnen Hintergrundbilder setzen Sie ein Komma.

Codebeispiel:

Entscheidend und vielleicht nicht ganz intuitiv ist die Zeichenreihenfolge: Das Hintergrundbild, das Sie zuerst angeben, ist dem Betrachter am nächsten, das heißt am weitesten oben. Das als Zweites angegebene Hintergrundbild befindet sich in der Ebene dahinter und so weiter.

Standardmäßig werden Hintergrundbilder gekachelt. Soll sich das anders verhalten, verwenden Sie wie gewohnt background-repeat, aber ebenfalls mit mehreren Werten:

Codebeispiel:

background-repeat: no-repeat,
repeat-y, repeat;

Damit wird bei drei angegebenen Hintergrundbildern das erste nur einmal dargestellt, das zweite auf der Y-Achse wiederholt und das dritte gekachelt.

Zusätzlich zu diesen Angaben ist für die Wiederholung space und round vorgesehen, diese werden aber derzeit noch nicht von den Browsern unterstützt.

Wenn Sie bei background-repeat weniger Werte angeben, als Sie Hintergrundbilder bei background-image bestimmt haben, so werden die Angaben wiederholt. Eine Angabe gilt dann für alle drei Elemente. Bei zwei Angaben gilt die erste Eigenschaft auch für das dritte Hintergrundbild.

Andere Eigenschaften wie die Positionen der mehrfachen Hintergrundbilder spezifizieren Sie ebenfalls über eine kommaseparierte Liste.

Parallax-Effekt

Ein schönes Beispiel für den Einsatz von Hintergrundbildern mit 3D-Wirkung ist der Parallax-Effekt. Sie sehen ihn beispielsweise bei silverbackapp.com , wenn Sie die Größe des Browserfensters verändern. Dann bewegen sich die Blätter in verschiedenen Geschwindigkeiten. Die Blätter, die näher am Betrachter sind, bewegen sich schneller, die weiter entfernten langsamer.

Möglich wird dieser Effekt durch mehrfache transparente Hintergrundbilder, deren Position in Prozent angegeben ist. Damit hängt die eigentliche Position der Hintergrundbilder von der Größe des Browserfensters ab. Und eine Vergrößerung oder Verkleinerung des Browserfensters bewirkt eine Verschiebung der Hintergrundbilder, was als Bewegung wahrgenommen wird.

Für den ursprünglichen Parallax-Effekt in Zeiten vor CSS3 waren mehrfache div- Elemente notwendig, die auf die Größe des Browserfensters gestreckt werden mussten. Nun geht das einfacher: Sie weisen direkt dem body-Element die Hintergrundbilder zu.

Wenn Sie die transparenten Bilder – im Beispiel sind es Sternenbilder – erstellt haben, genügen ein paar Zeilen, und der Parallax- Effekt ist komplett:

Codebeispiel:

body {
background-color: #003;
background-image: url(sterne3.png),
url(sterne2.png), url(sterne.png);
background-position: 85% 75%, 30%
20%, 10% 15%;
}