CSS background-image – Hintergrundbild

Mit CSS background-image kann ein Hintergrundbild einem Element zugewiesen werden. Dies gilt für Inline- und Blockelemente.

Dabei wird, relativ zum Pfad der CSS Datei, das Hintergrundbild auf dem Server ausgewählt und eingefügt. Ist der CSS Code direkt im HTML eingebunden, gilt der Pfad der HTML Datei als der Anfangspfad, von dem aus ein Bild angesteuert wird.

Ist das Element kleiner als das Bild, wird es abgeschnitten. Eine Wiederholung des Bildes ist mit der Eigenschaft background-repeat möglich, um zum Beispiel Hintergründe wie Farbübergänge zu wiederholen. Dies spart Speicherplatz und Ladezeit.

Beschreibung und Syntax zu CSS background-image

background-image: url('images/bild.jpg');
background-image: url('../images/bild.png');
background-image: url('http://meineseite.tdl/images/bild.jpg');

Erläuterung der Eigenschaften

background-image url absolut
Im Beispiel liegt das Bild im images Ordner, der sich neben der CSS Datei befindet. Es wird also absolut angesteuert.

background-image url relativ
Im 2. Beispiel wird der Ordner vor der CSS Datei angewählt und dann den darin enthaltenen images Ordner. Auch ../../images/bild.png wäre möglich, um 2 Ordner davor anzuwählen.

background-image url www-Adresse
Auch die Angabe einer www Adresse ist möglich. Beachte dabei, dass http oder https vor dem www enthalten sein muss. Das www kann auch weggelassen oder durch eine andere Subdomain ersetzt werden.

Informationen und Werte

Die Anführungsstriche können auch weggelassen werden, wenn der Pfad keine Leerzeichen enthält, sollten allerdings nach CSS Standart angegeben werden.

Vererbbar: Nein
Initialwert: none
Werte: none (kein Hintergrundbild), url() (Pfad, relativ zur CSS Datei oder dem HTML Dokument / oder URL des Bildes), inherit (Vererbung vom Elternelement)