CSS: Hintergrundsfarbe und Hintergrundsmotiv

Dieser Artikel wurde von Do, Hoang Viet am Mittwoch, 3. April 2013 verfasst. Aktualisiert: 28.01.2014 18:44:37

Für das Anpassen des Hintergrunds wird die Property background verwendet. Neben einer Hintergrundsfarbe, lässt sich auch ein Hintergrundsmotiv definieren und pixelgenau platzieren.

Die nachfolgende Definition würde den Hintergrund auf "Grün" setzen.

body {
  background: #00ff00;
}

Neben Farben können auch Hintergrundsbilder genutzt werden. Hierzu musst man lediglich statt eine Farbe ein Bild angeben.

body {
  background: url('/images/irgendwas.png');
}

Der Browser nutzt das angegebene Bild in diesem Fall als Hintergrundsbild. Wenn dieser nicht die ganze Anzeigefläche abdeckt, wird das Bild dupliziert. Ist es nicht erwünscht, könnt ihr "no-repeat" anfügen.

body {
  background: url('/images/irgendwas.png') no-repeat;
}

Anstelle von no-repeat kann repeat-x oder repeat-y stehen. In diesem Fall wird nur in horizontal bzw. vertikal wiederholt.

Im Falle von "no-repeat", ist es in der Praxis üblich, dass man neben den Hintergrundsmotiv auch eine Hintergrundsfarbe definiert. Hierzu bündelt man einfach die obere Farbdefinition mit dem Motiv

body {
  background: #00ff00 url('/images/irgendwas.png') no-repeat;
}

Das Hintergrundsmotiv lässt sich auch nocht beliebig positionieren.

body {
  background: #00ff00 url('/images/irgendwas.png') no-repeat 20px 100px;
}

In diesem Fall würde das Bild an der Position (20,100) auf der Anzeigefläche platziert werden. Anstelle einer Pixelangabe, können auch die Schlüsselwörter benutzt werden

left	Linke Ecke
right	Rechte Ecke
top	Obere Ecke
bottom	Untere Ecke
center	Zentriert

Folgende Definition

body {
  background: #00ff00 url('/images/irgendwas.png') no-repeat left top;
}

 würde das Motiv an der linken oberen Ecke platzieren.