HTML-Elementen Hintergrundbilder mit CSS zuweisen

Auf Websites zählen Hintergrundbilder zu den wichtigsten Werkzeugen für die optische Gestaltung. Immer dann, wenn das gewünschte Ergebnis mit einer Hintergrundfarbe nicht erzielt wird, kann man im Grunde ein Hintergrundbild verwenden. In der Standardeinstellung wird das Bild gekachelt und füllt die gesamte Box. Dabei wird von der linken, oberen Kante begonnen.

HTML-Element mit Hintergrundbild

Um einem Element ein Hintergrundbild zuzuweisen, verwendet man in CSS background-image. Die Eigenschaft ist ein Teil von background, kann jedoch auch eigenständig genutzt werden. Über url wird innerhalb der runden Klammern der Pfad zum Bild angegeben, das auf dem Server unter dem Pfad bereitliegen sollte. Die Syntax ist nachfolgend anhand eines Beispiels abgebildet.

CSS-Code mit background-image

Das Hintergrundbild nimmt innerhalb des Box-Modells standardmäßig die Bereiche content-box, padding und border ein. Das wird besonders deutlich, wenn man dem Element wie auf dem folgenden Bild einen gestrichelten, breiten Rahmen zuweist.

Hintergrundbild im Box-Modell

Mehrere Hintergrundbilder

Mit background-image kann man einem Element auch mehrere Hintergrundbilder zuweisen. Allerdings funktioniert das nur zuverlässig, wenn die Bilder entweder unterschiedlich groß sind und/oder transparente Bereiche haben und wenn das Hintergrundbild über background-repeat nicht wiederholt wird, da ansonsten das vorderste Bild die anderen Bilder überlagert. Bei der Reihenfolge ist zu beachten, dass das zuerst angegebene Bild vom Betrachter aus gesehen an der vorderster Position ist und das zuletzt angegebene Bild an der hintersten.

Außerdem kann man zur Sicherheit mit background-color auch eine Hintergrundfarbe für den Fall zuweisen, dass das Bild aus technischen Gründen mal nicht erreichbar sein sollte. Nachfolgend ist ein Beispielcode und die Abbildung des Ergebnisses im Browser. Die Bilder sind im PNG-Format mit transparenten Bereichen. Außerdem werden die Bilder nicht wiederholt.

.selektor {
background-image:
  url(blau.png),
  url(rot.png),
  url(gruen.png);

background-repeat: no-repeat;
background-color: #ccccff;
}

Die Bilder sind alle links oben ausgerichtet. Lediglich durch die transparenten Bereiche sieht das so aus, als wären die Bilder unterschiedlich positioniert. Die Darstellung im Browser sieht bei diesem Beispiel wie folgt aus.

Mehrere Hintergrundbilder mit background-image

Um einem Element mehrere Bilder zuzuweisen und zu positionieren, kann man auch die Shorthand-Eigenschaft background verwenden, die in manchen Fällen geeigneter ist. Darüber kann man nämlich die Einstellungen wesentlich differenzierter vornehmen, z.B. für jedes Bild die Position, Wiederholung, Bildgröße etc. separat angeben.

Farbverlauf für background-image angeben

Der Eigenschaft background-image kann man als Wert nicht nur Bilder zuweisen. Es ist auch möglich, Werte für einen Farbverlauf anzugeben, sodass man kein Bild hierfür benötigt. Neben linearen sind auch radiale (kreisförmige) Farbverläufe möglich. Die Anleitungen hierfür sind unterhalb des Knotens Schatten und Farbverläufe verfügbar.

Farbverlauf mit background-image

Damit kann man sehr schöne Effekte erzielen und das rein mit CSS-Code. Die älteren Browser unterstützen zwar nicht alle Farbverläufe. Bei den neueren Browsern ist die Unterstützung jedoch zumindest weitestgehend gegeben.