kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS multiple backgrounds – Einem HTML-Element mehrere Hintergründe zuweisen

Mit CSS könnt Ihr einem HTML-Element mehrere Hintergrundbilder-, farben oder -verläufe zuweisen. Ihr erreicht somit eine komplexere Gestaltung, bei gleichzeitig schlankem HTML-Markup. Wie Ihr Multiple Backgrounds umsetzt, zeige ich euch in diesem Beitrag an einem Beispiel mit drei Hintergrundbildern.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

Die CSS-background-Eigenschaft dient als Grundlage

Das mit dem CSS-Befehl background-image:url(…) einem Element ein Hintergrundbild zugewiesen werden kann, ist wahrscheinlich bekannt. Das folgende Beispiel weist dem <body>-Element ein Bild zu, positioniert es links oben und verhindert die Wiederholung:

body {
  background-image: url(sonne.png);
  background-position: top left;
  background-repeat: no-repeat;
}

Mehrere Hintergrundbilder verwenden

Für das Einbinden weiterer Bilder fasse ich die CSS-Eigenschaften background-image, background-position und background-repeat nun in der übersichtlicheren Kurzschreibweise background zusammen. Jetzt füge ich ein zweites Bild hinzu, indem ich nach dem ersten ein Komma setze. Beide Bilder positioniere ich, indem ich die X- und Y-Koordinaten festlege:

body {
  background:
    url(sonne.png) 20px 20px no-repeat,
    url(wolke.png) 990px 100px no-repeat
    ;
}

Beispiel anschauen

Nun möchte ich dem Himmel eine zweite Wolke geben. Dazu kopiere die letzte Bildzeile und füge diese nach einem weiteren Komma wieder ein. Die Positionierung erfolgt wieder über X- und Y-Koordinaten bis es gestalterisch passt:

body {
  background:
    url(sonne.png) 20px 20px no-repeat,
    url(wolke.png) 990px 100px no-repeat,
    url(wolke.png) 870px 120px no-repeat
    ;
}

Beispiel anschauen

Mit background-repeat ein Hintergrundbild wiederholen

Das dritte Hintergrundbild ist eine Wiese, die ich unten im Browserfenster über die gesamte Breite anzeigen lassen möchte. Das wird erreicht, indem das Bild wiese.png auf der X-Achse gekachelt wird:

body {
  background:
    url(sonne.png) 20px 20px no-repeat,
    url(wolke.png) 990px 100px no-repeat,
    url(wolke.png) 870px 120px no-repeat,
    url(wiese.png) bottom repeat-x
    ;
}

Beispiel anschauen

Einen Verlauf (CSS Gradient) hinzufügen

Mit CSS kann man nicht nur mehrere Hintergundbilder für ein Element miteinander kombinieren, sondern auch Verläufe. Um den Himmel zu gestalten, erhält der <body> jetzt einen Verlauf mit der CSS-Eigenschaft linear-gradient. Dafür setze ich wieder ein Komma nach der letzten Bildzeile und ergänze den Verlauf. In meinem Beispiel möchte ich, dass ein linearer Verlauf oben mit der Farbe Hellblau (lightblue) beginnt und nach unten in Weiß (white) übergeht. Dafür verwende ich in diesem Beispiel die CSS Standard Syntax für Verlaufe:

body {
  background:
    url(sonne.png) 20px 20px no-repeat,
    url(wolke.png) 990px 100px no-repeat,
    url(wolke.png) 870px 120px no-repeat,
    url(wiese.png) bottom repeat-x,
    linear-gradient(lightblue, white)
    ;
}

Beispiel anschauen

Multiple Backgrounds werden gestapelt

Jedes Hintergrundbild liegt auf einer separaten Ebene; ganz oben liegt das im Code zuerst notierte Bild. Veranschaulichen lässt sich das Prinzip, indem ich die erste Wolke über die X- und Y-Koordinaten unter die Sonne schiebe:

body {
  background:
    url(sonne.png) 20px 20px no-repeat,
    url(wolke.png) 100px 20px no-repeat,
    url(wolke.png) 870px 120px no-repeat,
    url(wiese.png) bottom repeat-x,
    linear-gradient(lightblue, white)
    ;
}

Beispiel anschauen

Die Reihenfolge der Bilder lässt sich natürlich beliebig verändern, je nachdem welches Objekt überlappt werden soll. Bitte beachtet jedoch, dass einfarbige Hintergründe immer in der untersten Ebene liegen müssen! Andernfalls wird der Hintergrund nicht dargestellt.

/* falsch */
div {
  background: red, url(bild1.jpg), url(bild2.jpg);
}

/* falsch */
div {
  background: url(bild1.jpg), red, url(bild2.jpg);
}

/* richtig */
div {
  background: url(bild1.jpg), url(bild2.jpg), red;
}

Browser-Support

CSS3 Multiple Backgrounds von allen modernen Browsern (ab IE9) unterstützt. Den detaillierten Browsersupport könnt ihr hier einsehen.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.