Ich habe in diesem Artikel einen Trick gezeigt, wie ihr für eure Webseite mehrere Hintergrundbilder nutzen könnt. Mit dem Einzug von CSS3 gibt es aber eine einfachere Möglichkeit. So können nun jedem Block-Element mehrere Background-Images zugeordnet werden. Dies beschränkt sich nicht nur auf Bilddateien, sondern es können auch Hintergrundfarbverläufe (background-gradients) genutzt werden.

Syntax

.box {
background-image: url(image_top.png), url(image_bottom.png);
background-position: center top, center bottom;
background-repeat: no-repeat, no-repeat;
}

Shorthand

.box {
background: url(image_top.png) center top no-repeat, url(image_bottom.png) center bottom no-repeat;
}

Browserunterstützung

  • Apple Safari 5+
  • Google Chrome 10+
  • Internet Explorer 9+
  • Mozilla Firefox 4+
  • Opera 11.1+

Beschreibung

Die Funktion ist recht simpel. Wir alle kennen den folgenden Aufruf zur Bestimmung des Hintergrunds:

.box {
background-image: url(image_top.png);
background-position: center top;
background-repeat: no-repeat;
}

Wollen wir nun ein weiteres Hintergrundbild nutzen, fügen wir es einfach, durch Komma getrennt, hinzu:

.box {
background-image: url(image_top.png), url(image_bottom.png);
background-position: center top, center bottom;
background-repeat: no-repeat, no-repeat;
}

Wie bereits erwähnt können auch gradients als Hintergrund genutzt werden. Hier ein Beispiel mit zwei Farbverläufen (ich lasse der übersicht wegen die Browser-Präfixe für gradients mal weg):

.box {
background-image: linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%), linear-gradient(bottom, rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%);
background-position: top, bottom;
background-repeat: no-repeat, no-repeat;
}

Auf der Demo-Seite gibt es weitere Beispiele:

Hintergrundbild über die gesamte Webseite (Full Page Background)

Okay, das passt zwar nicht zum eigentlichen Thema dieses Artikels, ist aber für den ein oder anderen vielleicht doch ganz interessant: das Skalieren von Hintergrundbildern über die gesamte Breite und Höhe der Webseite.

Auch dies ist eine Neuerung, die mit CSS3 Einzug hält. Erreicht wird die Skalierung durch folgenden Aufruf:

html {
background: url(image.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}

Das Bild wird mittig zentriert und auf die volle Höhe und Breite der Webseite skaliert. Das Ursprungsbild sollte also nicht zu klein sein, da es sonst durch die Skalierung sehr pixelig wird.

Auch dazu habe ich eine kleine Demo für euch:

Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite: