CSS - Hintergrundbilder

Der Hintergrund füllt eine Box komplett aus, alle Inhalte der Box überlagern den Hintergrund. Dabei kann der Hintergrund einfarbig sein (Eigenschaft background-color) oder aus einem Hintergrundbild bestehen.

Für die Definition von Hintergrundbildern können folgende Eigenschaften benutzt werden:

background-image:

fügt der Box ein Hintergrundbild hinzu,

background-repeat:

definiert, ob und wie oft das Hintergrundbild in der Box wiederholt wird,

background-position:

definiert, an welcher Stelle der Box das Hintergrundbild platziert wird,

background-size:

definiert die Größe des Hintergrundbildes.

Die Eigenschaft background-image fügt einer Box ein Hintergrundbild hinzu.

Das Bild wird in der linken oberen Ecke der Box platziert und standardmäßig so oft in allen Zeilen und Spalten wiederholt, bis die gesamte Box ausgefüllt ist.

Die Bilddatei wird dabei mit dem Wert url referenziert: Die URL wird – analog zu Angaben in HTML (src oder href) - entweder als eine externe (http://...) oder eine interne Adresse relativ zur CSS-Datei angegeben.

Die Eigenschaft background-repeat definiert, ob und wie oft das Hintergrundbild in der Box wiederholt wird. Die möglichen Werte sind:

repeat:

Das Bild wird so oft in horizontaler und vertikaler Richtung wiederholt, bis die gesamte Box gefüllt ist (Standardwert).

no-repeat:

Das Bild wird genau einmal in der Box angezeigt.

repeat-x:

Wiederholung des Bildes innerhalb der Zeile, in der das Bild referenziert wird.

repeat-y:

Wiederholung des Bildes innerhalb der Spalte, in der das Bild referenziert wird.

Die Eigenschaft background-position definiert, an welcher Stelle der Box das Hintergrundbild platziert wird. Die möglichen Werte sind:

Vordefinierte Positionen:

• horizontal: left, center, right
• vertikal: top, center, bottom

Maßeinheiten

Angabe mit Maßeinheiten für die Entfernung des Bildes von der linken oberen Ecke der Box (absolute Angabe) .

Prozentzahlen

Angabe mit Prozentzahlen (Angabe für die Entfernung des Bildes von der linken oberen Ecke der Box):

• Horizontal: relativ zur Breite der Box
• Vertikal: relativ zur Höhe der Box

Die Eigenschaft background-size definiert die Größe des Hintergrundbildes. Die möglichen Werte sind:

Maßeinheiten:

Angabe mit Maßeinheiten für die Breite und Höhe des Bildes (zwei Werte). Wird nur der erste Wert angegeben, hat die Höhe automatisch den Wert auto.

Prozentzahlen

Angabe der Prozentzahlen für die Breite und Höhe des Bildes (zwei Werte). Wird nur der erste Wert angegeben, hat die Höhe automatisch den Wert auto.

cover

Das Bild wird so vergrößert oder abgeschnitten, dass es den gesamten Bereich füllt. Dabei wird das Bild so skaliert, dass es genau so breit / hoch ist wie die längere Boxenseite. Es an der kürzeren Boxenseite ggf. abgeschnitten, damit das Bild die Box komplett ausfüllt.

contain

Das Bild wird so skaliert, dass es den gesamten Bereich füllt. Dabei wird das Bild so skaliert, dass es genau so breit / hoch ist wie die kürzere Boxenseite Das ursprüngliche Seitenverhältnis des Bildes bleibt unverändert. Hat die Box ein anderes Seitenverhältnis als das Bild, wird sie nicht komplett ausgefüllt.

Mit der Eigenschaft background kann die Hintergrundspezifikation auch abgekürzt werden. Die folgenden CSS-Angaben haben eine identische Auswirkung:

body { background-color: white;
	background-image: url(apfel.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}

body {background: white url(apfel.jpg) no-repeat center center}

Die Eigenschaften background-image bzw. background gehören zu den CSS-Eigenschaften, die KEINE Konflikte auslösen, wenn sie für ein Element mehrmals definiert werden. Stattdessen werden mehrere Hintergrundbilder geladen.

Zu beachten ist dabei, dass Bilder, welche weiter im Vordergrund stehen sollen, als erste in der Aufzählung vorkommen müssen.

img-Elemente sollten benutzt werden, wenn das Bild eine inhaltliche Bedeutung hat und nicht nur dem Design der Webseite dient. Ein img-Elemente sollte auch benutzt werden, wenn das Bild über Suchmaschinen gefunden werden soll (inkl. der Information im alt- und title-Attribut).

Ein Hintergrundbild (CSS-Eigenschaft background-image sollte benutzt werden, wenn das Bild keine inhaltliche Bedeutung hat und ausschließlich Design-Zwecken dient. Hintergrundbilder werden ebenfalls benutzt, wenn das Bild an mehreren Stellen referenziert werden soll (z.B.. Icons, Profil-Bilder, …). Auch wenn vom Bild nur ein Ausschnitt angezeigt werden soll, der die komplette Box ausfüllt (background-size: cover), sind Hintergrundbilder geeignet. Ebenfalls geeignet sind Anwendungsfälle, bei denen das Bild komplett angezeigt werden aber nicht unbedingt die gesamte Box ausfüllen (background-size: contain) soll.