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.