Hintergrund

Bei Hintergründen in CSS unterscheidet man grundsätzlich zwischen Hintergrundfarbe und Hintergrundbild. Hintergründe können auf alle Elemente angewendet werden.

Farbe

Um einem Element eine Hintergrundfarbe zu geben, gibt es die Eigenschaft background-color. Hier können Farben in allen bekannten Varianten angegeben werden.

h1
{
	background-color: red;
}

p
{
	background-color: lime;
}

Bild

Um einem Element ein Hintergrundbild zuzuweisen, gibt es die Eigenschaft background-image. Als Wert wird das Schlüsselwort url gefolgt von einem runden Klammernpaar angegeben. Innerhalb der Klammern wird die URL des Bilds in Anführungszeichen angegeben.

body
{
	background-image: url("/Bilder/Logo/Logo.png");
}

Um das Hintergrundbild noch genauer zu spezifizieren, gibt es einige Eigenschaften, welche wir Ihnen hier nun vorstellen werden. Über die Eigenschaft background-size lässt sich die Größe des Bilds festlegen. Als erstes wird die Breite und als zweites die Höhe angegeben. An Stelle einer Zahl mit Einheit kann auch das Schlüsselwort auto notiert werden. Dadurch wird der Wert automatisch ermittelt. Wird nur der 1. Wert angegeben, so entspricht der 2. Wert automatisch dem Wert auto.

Normalerweise wird das Hintergrundbild horizontal und vertikal wiederholt. Dies kann über die Eigenschaft background-repeat geändert werden. Als Werte sind repeat (horizontale und vertikale Wiederholung), repeat-x (horizontale Wiederholung), repeat-y (vertikale Wiederholung) und no-repeat (keine Wiederholung) möglich.

Mit Hilfe der Eigenschaft background-position lässt sich die Positionierung des Startbilds (1. Bild) angeben. Hier ist eine relative, aber auch eine absolute Positionierung möglich. Zudem kann eine Positionierung mittels den Schlüsselwörtern left, right und center für die horizontale Positionierung und top, bottom und center für die vertikale Positionierung erfolgen. Bei der Notation muss zuerst die horizontale Position und anschließend die vertikale Position angegeben werden. Es ist auch möglich, einen der Werte wegzulassen. Dadurch wird der andere Wert automatisch auf center gesetzt.

body
{
	background-image: url("/Bilder/Logo/Logo.png");
	background-size: 50px;
	background-position: center;
	background-repeat: repeat-y;
}

Übrigens: Wenn Sie ein Hintergrundbild verwenden, heißt das noch lange nicht, dass die Angabe einer Hintergrundfarbe unzulässig ist. Im Gegenteil: Oft wird beim Hintergrund auch eine Kombination von Hintergrundfarbe und Hintergrundbild verwendet. Nützlich ist dies, wenn sich das Hintergrundbild nicht über die ganze Seite erstreckt, das Hintergrundbild transparent ist oder das Hintergrundbild nicht geladen werden kann.