Hintergrundbilder in Größe und Positionierung optimieren

Wie fügt man Hintergrundbilder ein und wie kann man Hintergrundbilder am besten optimieren, sodass sie also auf allen denkbaren Displaygrößen optimal dargestellt werden?

Das Einfügen eines Hintergrundbildes erfolgt mit dem Befehl background: gefolgt von der entsprechenden URL in der sich das Bild befindet. Mit dem Befehl 50% 50% wird das Hintergrundbild genau in der Mitte des äußeren DIV-Containers ausgerichtet, unabhängig davon wie groß der äußere Container ist.

Mit dem Befehl left wird das Hintergrundbild links ausgerichtet, wodurch – wenn der der äußere Container kleiner als das ist als das Bild – die rechte Seite zuerst abgeschnitten wird.

In diesem Beispiel ist es genau umgekehrt. Das Bild wird rechts ausgerichtet. Wie wir hier gesehen haben, hat der Befehl nach dem Einfügen des Bildes (also 50% / left / right) nichts mit der Bildgröße sondern mit dessen Positionierung zu tun.

Um auf die Größe des Hintergrundbildes Einfluss nehmen zu können, gibt es den Befehl background-size.

Hierbei wird das Hintergrundbild auf die Größe des äußeren Div-Containers gestreckt, unabhängig davon wie groß dieser ist. Das Bild wird also eventuell verzerrt dargestellt.

Das Bild wird nun nicht mehr verzerrt dargestellt sondern passt sich in der Höhe immer genau dem äußeren Container an (100%). In der Breite steht auf auto, wodurch das Bild das Seitenverhältnis behält und in der aus der Höhe resultierenden Breite dargestellt wird. Eventuell können hierdurch links und rechts Leerräume entstehen oder es kann links und rechts abgeschnitten werden.

Das Bild passt sich in der Breite dem äußeren Container an, das Seitenverhältnis bleibt bestehen. Das Bild wird ebenfalls nicht verzerrt dargestellt, aber es können oben und Leerräume entstehen oder es kann oben oder unten abgeschnitten sein.

Das Hintergrundbild wird komplett dargestellt und nicht verzerrt oben / unten und links / rechts können hierbei Leerräume entstehen.

Das Bild füllt den gesamten Container aus und wird abgeschnitten, falls der äußeree Container kleinder ist.

Mehrere Hintergrundbilder

In CSS3 kann man aber auch noch mehr machen. Zum Beispiel mehrere Hintergrundbilder für ein und denselben DIV-Container:

Durch ein Komma werden die Hintergrundbilder voneinander getrennt. Jedes Bild kann separat positioniert werden. Auch kann für jedes Bild eine separate Bildgröße durch Komma getrennt angegeben werden.