CSS Tutorial - Hintergrund - Internetagentur SEO Lausitz

Den Hintergrund (Background) eines Elements stylen

Der Hintergrund eines Elements ist ein wesentlicher Bestandteil des visuellen Designs einer Webseite.
CSS bietet eine Reihe von Eigenschaften, um Hintergrundfarben und Hintergrundbilder flexibel zu gestalten.
Die wichtigsten Eigenschaften sind:

background-color
background-image
background-repeat
background-attachment
background-position

Im Folgenden sehen wir uns jede dieser Eigenschaften im Detail an.

Hintergrundfarbe per CSS ändern

Mit background-color kann die Hintergrundfarbe eines Elements festgelegt werden.
Das folgende Beispiel setzt die Hintergrundfarbe für die gesamte Seite:

body {
    background-color: red;
}

Zur Erinnerung: Gängige Farbwerte sind:

Farbnamen: red, blue, yellow
HEX-Werte: #ff0000
RGB-Werte: rgb(255, 0, 0)

Für weiterführende Informationen siehe das Kapitel CSS Farben.

Hintergrundbild

Mit der background-image-Eigenschaft lässt sich ein Bild als Hintergrund definieren.
Das folgende Beispiel setzt ein Hintergrundbild für die gesamte Seite:

body {
    background-image: url("images/background-test.webp");
}

Achtung: Achten Sie darauf, dass der Hintergrund die Lesbarkeit des Textes nicht beeinträchtigt.

Standardmäßig wiederholt der Browser das Hintergrundbild. Dies kann mit background-repeat gesteuert werden.

Wiederholung des Hintergrunds

Die background-repeat-Eigenschaft steuert, wie häufig das Bild wiederholt wird:

body {
    background-image: url("images/pattern.png");
    background-repeat: repeat-x;
}

Weitere Werte:

repeat-y – Wiederholt nur vertikal
no-repeat – Keine Wiederholung
repeat – Standardverhalten

Positionierung des Hintergrundbildes

Die background-position-Eigenschaft legt die Position des Hintergrundbildes fest.
Wird sie nicht angegeben, beginnt das Bild oben links.

body {
    background-image: url("images/pattern.png");
    background-repeat: no-repeat;
    background-position: right top;
}

Alle Werte sind möglich: Keywords, Prozentangaben oder Pixelwerte.

Merke: Der erste Wert bestimmt die horizontale Position, der zweite die vertikale.

background-attachment

Mit background-attachment kann festgelegt werden, ob das Hintergrundbild mitscrollt oder fest bleibt.

body {
    background-image: url("images/pattern.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Dadurch entsteht der bekannte „Parallax“-Effekt, bei dem das Bild stehen bleibt, während der Inhalt scrollt.

Hintergrund-Eigenschaften abkürzen

Alle Hintergrund-Eigenschaften lassen sich in einer einzigen Zeile bündeln. Das macht den CSS-Code kompakter.

Beispiel (Langform):

body {
    background-color: red;
    background-image: url("images/pattern.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 500px 50px;
}

Kurzschreibweise:

body {
    background: red url("images/pattern.png") no-repeat fixed 500px 50px;
}

Reihenfolge beachten:
<Farbe> <Bild> <Wiederholung> <Attachment> <Position>

Fehlt ein Wert, gilt der Standardwert.

Hinweis: Hintergrunddefinitionen werden nicht vererbt. Jedes Element braucht seine eigene Hintergrundangabe.

CSS Tutorial – Hintergrund