Mehrere Hintergrundbilder für ein Objekt verwenden

Autor
Matthias Apsel (Impressum)
veröffentlicht
15.03.2010
letzte Änderung
23.01.2015 (Alternativen sind nicht mehr notwendig)

Zusammenfassung

Dieser Artikel stellt ein einfaches Beispiel zur Verwendung mehrerer Hintergründe ab CSS3 dar. Er kann somit als Testseite für neue Browserversionen verwendet werden. Gleichzeitig stellt er für Browser, die CSS3 noch nicht beherrschen, 3 Resourcen schonende Alternativen vor.

In CSS3 kann man auch den border-Elementen Hintergrundgrafiken zuweisen. Deshalb würde man dieses konkrete Beispiel mit den Balken als Hintergrundgrafiken wohl besser mit border-image umsetzen.

VergleichSie können diese Seite verwenden um zu überprüfen, ob Ihr Browser die CSS3-Spezifikationen korrekt umsetzt. Dazu sollten die Darstellungen in den Ergebnisfenstern so aussehen wie die Grafik links. Mit der Version 10.50 unterstützt nun auch Opera dieses Feature, sodass der Internetexplorer momentan der einzige der großen Browser ohne CSS3-Unterstützung bleibt.

Mehrere Hintergrundbilder in CSS3

CSS3 erlaubt die Verwendung mehrerer Hintergrundbilder für ein Objekt. Dazu werden der CSS-Eigenschaft background-image einfach mehrere durch Kommata von einander getrennte Grafiken übergeben.

Für weitere Eigenschaften wie z.B. background-position oder background-repeat werden die Werte ebenfalls durch Kommata getrennt

<!DOCTYPE HTML PUBLIC ..."> ... <html> ... <body> <div> <p>Ich bin ein blinder Text, andere würden "Lorem ipsum" schreiben. ... </p> </div> </body> </html>
div { border: none; width: 75%; margin: 5px auto; padding: 10px 10px 10px 24px; background-color: #F7DEC6; background-image: url(oben.gif), url(links.gif); background-position: 0px 8px, 8px 0px; background-repeat: repeat-x, repeat-y; background-attachment: scroll; }

Ich bin ein blinder Text, andere würden "Lorem ipsum" schreiben. Ich bin schon ganz schön arm dran. Mein Bruder, der Lorem ipsum, hat es da schon etwas weiter gebracht. Viele Druckmaschinen halten ein, wenn sie ihn sehen, denn sie wissen, dass er nicht gedruckt werden sondern nur als Platzhalter fungieren soll.

Mir geht es es allerdings in einer Hinsicht besser als meinem Bruder: Ich werde gelesen, auch wenn ich nicht wirklich einen Informationsgehalt habe.

Auf die Reihenfolge kommt es an

Die Hintergrundgrafiken werden dabei umgekehrter Reihenfolge, in der sie genannt werden, übereinander gestapelt, also die erste Grafik liegt ganz oben.

<!DOCTYPE HTML PUBLIC ..."> ... <html> ... <body> <div> <p>Ich bin ein blinder Text, andere würden "Lorem ipsum" schreiben. ... </p> </div> </body> </html>
div { border: none; width: 75%; margin: 5px auto; padding: 10px 10px 10px 24px; background-color: #F7DEC6; background-image: url(oben.gif), url(links.gif); background-position: 0px 8px, 8px 0px; background-repeat: repeat-x, repeat-y; background-attachment: scroll; }

Ich bin ein blinder Text, andere würden "Lorem ipsum" schreiben. Ich bin schon ganz schön arm dran. Mein Bruder, der Lorem ipsum, hat es da schon etwas weiter gebracht. Viele Druckmaschinen halten ein, wenn sie ihn sehen, denn sie wissen, dass er nicht gedruckt werden sondern nur als Platzhalter fungieren soll.

Mir geht es es allerdings in einer Hinsicht besser als meinem Bruder: Ich werde gelesen, auch wenn ich nicht wirklich einen Informationsgehalt habe.

erst verdeckt rot orange, nun umgekehrt:

<!DOCTYPE HTML PUBLIC ..."> ... <html> ... <body> <div> <p>Ich bin ein blinder Text, andere würden "Lorem ipsum" schreiben. ... </p> </div> </body> </html>
div { border: none; width: 75%; margin: 5px auto; padding: 10px 10px 10px 24px; background-color: #F7DEC6; background-image: url(links.gif), url(oben.gif); background-position: 8px 0px, 0px 8px; background-repeat: repeat-y, repeat-x; background-attachment: scroll; }

Ich bin ein blinder Text, andere würden "Lorem ipsum" schreiben. Ich bin schon ganz schön arm dran. Mein Bruder, der Lorem ipsum, hat es da schon etwas weiter gebracht. Viele Druckmaschinen halten ein, wenn sie ihn sehen, denn sie wissen, dass er nicht gedruckt werden sondern nur als Platzhalter fungieren soll.

Mir geht es es allerdings in einer Hinsicht besser als meinem Bruder: Ich werde gelesen, auch wenn ich nicht wirklich einen Informationsgehalt habe.

Alternativen für CSS 2.1

Inzwischen ist es nur noch der Internetexplorer 8 unter den relevanten Browsern (Marktanteil ca. 4%, Jan. 2015), der keine multiplen Hintergründe unterstützt. Dieser Browser stellt ein Sicherheitsrisiko dar, da er hauptsächlich unter dem Betriebssystem Windows XP genutzt wird, für das keinerlei Support mehr geleistet wird. Webautoren sollten deshalb für diesen Browser keinen Aufwand betreiben.

Referenzen

http://www.w3.org/TR/css3-background/#backgrounds