Mehrere Hintergründe in CSS

CSS ermöglicht es, einem einzelnen Element mehrere Hintergrundebenen zuzuweisen. Diese können Bilder, Farben oder sogar Verläufe sein, die durch Kommas getrennt aufgelistet werden. Die Reihenfolge bestimmt, welche Ebene oben und welche unten liegt.

Grundlagen: mehrere Bilder übereinander

Wenn du mehrere Bilder als Hintergrund verwenden möchtest, liste sie einfach durch Kommas getrennt in der Eigenschaft background-image auf. Das erste Bild erscheint ganz oben, die folgenden darunter.

In diesem Beispiel gibt es zwei Hintergrundbilder: einen Sternenhimmel und einen Mond. Mit der Positionierung steuern wir, wo sie erscheinen.

Kombination von Verläufen und Bildern

Du kannst Verläufe ebenfalls als Hintergrund verwenden und sie mit Bildern kombinieren. Dies ist nützlich, wenn du das Bild abdunkeln möchtest, ohne die Bilddatei selbst zu ändern.

Hier wird ein linearer Verlauf über das Bild gelegt, der eine transparente schwarze Schicht zum Landschaftsbild hinzufügt. Dies ist eine gängige Lösung, um die Lesbarkeit von Text zu verbessern.

Tipps für mehrere Hintergründe

Einige praktische Tipps für die Verwendung mehrerer Hintergründe:

• Überprüfe immer, ob die Hintergrundbilder auch auf kleineren Bildschirmen gut passen.
• Verwende Verläufe, um Texte vom Hintergrund hervorzuheben.
• Die Reihenfolge bestimmt die Schichtung: die erste Ebene liegt immer oben.