Backgrounds

Hintergrundbilder (background-image)

Nicht nur Farben lassen sich als Hintergründe definieren, auch Bilder lassen sich als Hintergrundelemente verwenden.

Mit Hilfe dieses Befehls können Sie z.B. der Webseite ein Hintergrundbild hinzufügen:

BODY { background-image: url(back.gif); }

Aber nicht nur beim BODY-Tag macht dieser Befehl Sinn. Auch bestimmte Absätze oder Tabellen bzw. Tabellenzellen lassen sich so mit Hintergrundbildern versehen:

P.hintergrund { background-image: url(back.jpg); }

<P class="hintergrund">Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>

Wiederholung des Hintergrundbildes (background-repeat)

Sobald Sie einer Webseite ein Hintergrundbild hinzufügen, wird es sowohl horizontal wie aber auch vertikal wiederholt angezeigt. Diese Eigenschaft führt manchmal – besonders bei hohen Bildschirmauflösungen – zu unschönen Effekten.

Dem lässt sich bei der Angabe des Hintergrundbildes mit Hilfe von CSS entgegen wirken.

Bei der Angabe von Hintergrundfarben bzw. Hintergrundbildern sollten Sie immer darauf achten, dass der Kontrast zwischen Vorder- und Hintergrundelementen gegeben bleibt.

Sie können angeben in welcher Richtung ein Hintergrundbild wiederholt werden soll: repeat-x lässt nur eine horizontale, repeat-y nur eine vertikale Wiederholung zu. Mit Hilfe von no-repeat können Sie festlegen, dass das Hintergrundbild nicht wiederholt wird, d.h. nur ein einziges Mal im Hintergrund angezeigt wird.

Beim Standardwert repeat verhält sich das Hintergrundbild wie bei Angabe mit Hilfe des HTML-Tags.

Die Angabe funktioniert natürlich nicht nur bei Hintergrundbildern einer Webseite, sondern überall dort, wo Sie Hintergründe angeben können, z.B. bei Tabellen oder einfach bei Überschriften.

Positionierung des Hintergrundbildes (background-position)

Dieser Befehl ermöglicht eine genaue Ausrichtung bzw. Positionierung des Hintergrundbildes.

Was genau ist nun mit diesem Befehl gemeint? Wenn Sie ein Hintergrundbild in einer Webseite bzw. einem Element zentrieren möchten, genügt der folgende Befehl:

BODY {
background-image: url(back.gif);
background-repeat: no-repeat;
background-position: center;
}

Das Hintergrundbild lässt sich also mit verschiedenen Schlüsselworten ausrichten: zuerst wird mit den drei Schlüsselworten top, center und bottom eine Angabe über die vertikale Ausrichtung gemacht und anschließend durch ein Leerzeichen getrennt (mit Hilfe von left, center und right) die Angabe der horizontalen Ausrichtung. Beide Angaben lassen sich aber auch vertauschen: top right entspricht zum Beispiel right top.

Folgender Befehl positioniert ein Hintergrundbild in der unteren rechten Ecke:

BODY {
background-image: url(back.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

Im obigen Beispiel haben Sie es vielleicht bemerkt: Das Schlüsselwort center taucht nur einmal auf, eigentlich müsste der Befehl ja center center lauten. Bestimmte Position lassen sich aber nur durch die Angabe eines Schlüsselwortes abkürzen:

Hintergrundbilder lassen sich aber auch durch die Angabe von prozentualen Werten ausrichten.

Dieser Befehl zentriert ebenfalls das Hintergrundbild:
BODY {
background-image: url(back.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
}

Dabei liegt immer der Mittelpunkt des Bildes an der angegebenen Stelle, also 50% von links und 50% von oben. Hier kommt der horizontale Wert immer zuerst!

Hier eine Übersicht der verschiedenen Werte:

Wie in der Definition zu sehen, ist es auch möglich genaue Längenangaben zur Positionierung des Hintergrundbildes zu machen:

BODY {
background-image: url(back.gif);
background-repeat: no-repeat;
background-position: 50px 100px;
}

Dieses Hintergrundbild wird 50 Pixel vom linken und 100 Pixel vom oberen Rand des Elementes dargestellt.

Es ist auch möglich Längenangaben mit Prozentwerten zu kombinieren:

BODY {
background-image: url(back.gif);
background-repeat: no-repeat;
background-position: 25px 50%;
}

Eine Kombination von Schlüsselworten und Prozent- bzw. Längenangaben ist dagegen nicht möglich.

Bei der Definition von Längenangaben können Sie auch negative Werte verwenden, damit werden Teile des Hintergrundbildes abgeschnitten.

Hintergrundbild-Fixierung (background-attachment)

Normalerweise wird beim Scrollen der Webseite das Hintergrundbild mit gescrollt. Mit dem folgenden Befehl können Sie dieses Verhalten ändern:

Möchten Sie das Hintergrundbild fest in der Webseite verankern, notieren Sie z.B. den folgenden Befehl:

BODY {
background-image: url(back.gif);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}

Kurzversion zur Definition von Hintergründen (background)

Mit dem Kurzbefehl background können Sie alle Angaben zu Hintergründen in einem Befehl zusammen unterbringen.

Folgender Befehl fasst alle Einzelbefehl zusammen:

BODY { background: black url(back.gif) top right repeat-x fixed; }

Dabei lassen sich – wie obiges Beispiel zeigt – die einzelnen Befehle beliebig ordnen, lediglich die beiden Einzelwerte von background-position müssen zusammenbleiben (zuerst horizontal und dann vertikal).

Werden nicht alle Einzelbefehle benötigt, so können sie einfach weggelassen werden:

BODY { background: black; }