Homepage-Webhilfe Event-Banner

Hintergrund

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


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;
}
Vorschau

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");
}
Vorschau

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;
}
Vorschau

Ü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.

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen OK