Hintergründe von HTML-Elementen auf Websites

Zu den wichtigsten Aufgaben bei der Entwicklung eines Designs für eine Website gehört das Festlegen von Hintergründen. CSS bietet den Entwicklern hierfür verschiedene Möglichkeiten. Man kann Elementen Hintergrundfarben und/oder Bilder zuweisen oder auch Farbverläufe mit mehreren Farben. Hierfür verwendet man bestimmte Eigenschaften, die auf den folgenden Seiten beschrieben werden.

background (Shorthand-Eigenschaft für die Kurzschreibweise)
background-color (Hintergrundfarbe)
background-image (Hintergrundbild)
background-repeat (Wiederholung des Hintergrundbilds)
background-position (Position des Hintergrundbilds)
background-size (Größe des Hintergrundbildes)
background-attachment (Verhalten des Hintergrundbilds beim Scrollen)
background-origin (Bereich des Hintergrundbilds)
background-clip (Box-Modell für den Hintergrund)

Shorthand für den Hintergrund in CSS - background

Um mehrere Eigenschaften nicht einzeln angeben zu müssen, gibt es in CSS sogenannte Shorthand-Eigenschaften, die praktisch mehrere Eigenschaften vereinen und eine Kurzschreibweise ermöglichen. Für die Festlegung des Hintergrunds für ein Element kann man in CSS background verwenden. Darüber werden die folgenden Eigenschaften in Kurzform angegeben.

background-image
background-repeat
background-position
background-size
background-attachment
background-origin
background-clip
background-color

Anhand eines Beispiels mit häufig genutzten Werten ist die Syntax nachfolgend abgebildet. Die in CSS3 hinzugekommenen neuen Eigenschaften background-size, background-origin und background-clip wurden zur Vereinfachung ausgelassen, da sie insbesondere bei älteren Browser häufig nicht unterstützt wurden.

Reihenfolge und Standardwerte beim Auslassen von Werten

Alle Werte sind optional und können auch weggelassen werden. Die Reihenfolge spielt keine Rolle, außer beim Wert für background-size. Diese Angabe muss nach dem Wert für background-position erfolgen. Lässt man gewisse Werte aus, werden für sie die folgenden Standardwerte gesetzt.

none (für background-image)
repeat (für background-repeat)
0% 0% (für background-position)
auto auto (für background-size)
scroll (für background-attachment)
padding-box (für background-origin)
border-box (für background-clip)
transparent (für background-color)

Mehrere Hintergründe

Man kann einem Element mit der Eigenschaft background auch mehrere Hintergründe zuweisen. Jeder Satz an Werten wird dabei mit einem Komma getrennt angegeben. Der zuerst angegebene Hintergrund ist dabei an der vordersten Position und überlagert die danach folgenden Hintergründe. Der zuletzt angegebene Hintergrund ist somit ganz unten. Deshalb darf die Eigenschaft background-color nur beim letzten Hintergrund angegeben werden. Nachfolgend ist hierfür ein Beispiel Code.

.selektor {
background: 
  url(gruen.jpg) 170px 30px no-repeat, 
  url(blau.jpg) 85px 20px no-repeat, 
  url(rot.jpg) 10px 10px no-repeat, yellow;
}

Die Darstellung im Browser wäre bei diesem CSS-Code wie folgt.

Der 1. Hintergrund mit dem Bild gruen.jpg ist an vorderster und der letzte Hintergrund mit dem Bild rot.jpg an unterster Position. Die gelbe Farbe ist ebenfalls beim letzten Eintrag und ist unterhalb des roten Hintergrundbilds.