CSS lernen - mit CSS den Hintergrund eines Elementes stylen

CSS Grundlagen

CSS Einführung CSS Erste Schritte CSS Syntax CSS Selektoren CSS Farben CSS Hintergrund CSS Schriften CSS Text CSS Links CSS Listen CSS Tabellen

CSS Box Modell

CSS Box Model CSS Dimensionen CSS Padding CSS Border CSS Margin

Den Hintergrund (Background) eines Elementes stylen

Der Hintergrund spielt eine wichtige Rolle bei der visuellen Darstellung einer Webseite.

CSS bietet verschiedene Eigenschaften zum Gestalten des Hintergrunds eines Elements. So können Sie den Hintergrund mit einer Farbe versehen oder ein Bild als Hintergrund-Bild platzieren und dieses z.B. positionieren.

Die Hintergrund-Eigenschaften sind background-color, background-image, background-repeat, background-attachment und background-position.

Im folgenden Abschnitt werden wir uns jede dieser Eigenschaften genauer ansehen.

Hintergrundfarbe per CSS ändern

Die background-color-Eigenschaft wird verwendet, um die Hintergrundfarbe eines Elements festzulegen. Das folgende Beispiel zeigt, wie Sie die Hintergrundfarbe der gesamten Seite festlegen.


body {
    background-color: red;
}

Kurz zur Erinnerung: Farbwerte im CSS werden am häufigsten in den folgenden Formaten angegeben:

ein Farbname - wie red
ein HEX-Wert - wie #ff0000
ein RGB-Wert - wie rgb(255, 0, 0)

Sehen Sie sich das Tutorial zu CSS-Farben an, um mehr über die Angabe von Farbwerten zu erfahren.

Hintergrundbild

Die background-image-Eigenschaft legt ein Bild als Hintergrund eines HTML-Elements fest. Schauen wir uns das folgende Beispiel an, das das Hintergrundbild für die gesamte Seite festlegt.


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

Achtung: Stellen Sie beim Anwenden des Hintergrundbilds auf ein Element immer sicher, dass das ausgewählte Bild die Lesbarkeit des Textinhalts des Elements nicht negativ beeinträchtigt.

Tipp: Standardmäßig wiederholt oder kachelt der Browser das Hintergrundbild sowohl horizontal als auch vertikal, um den gesamten Bereich eines Elements auszufüllen. Sie können dies mit der background-repeat-Eigenschaft steuern.

Wiederholung des Hintergrundes

Mit der background-repeat-Eigenschaft können Sie steuern, wie ein Hintergrundbild im Hintergrund eines Elements wiederholt wird. Sie können festlegen, dass ein Hintergrundbild vertikal (y-Achse), horizontal (x-Achse), in beide Richtungen oder in keine Richtung wiederholt wird.

Folgender Code erlaubt eine Wiederholung in horizontaler Ebene:


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

Wenn wir erreichen wollen, dass sich das Bild entlang der y-Achse wiederholt, so nutzen wir background-repeat: repeat-y;. Mit dem Wert background-repeat: no-repeat; unterbinden wir schließlich jegliche Wiederholung.

Positionierung des Hintergrund-Bildes

Die background-position-Eigenschaft wird verwendet, um die Position des Hintergrundbildes zu steuern. Wenn keine Hintergrundposition angegeben wurde, wird das Hintergrundbild an der Standardposition oben links platziert.

Folgendes Beispiel zeigt die Ausrichtung eines Hintergrund-Bildes in der oberen rechten Ecke:


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

Neben den Schlüsselwörtern können Sie auch Prozent- oder Längenwerte wie px oder em für diese Eigenschaft verwenden.

Hinweis: Wenn für die background-position-Eigenschaft zwei Werte angegeben werden, steht der erste Wert für die horizontale Position (also auf der X-Achse) und der zweite für die vertikale Position (auf der y-Achse). Wenn nur ein Wert angegeben wird, wird der zweite Wert als zentriert angenommen.

"background-attachment" - Das Anhängen eines Hintergrundes

Die background-attachment-Eigenschaft legt fest, ob das Hintergrundbild bezüglich des Ansichtsfensters fixiert ist oder mit dem umgebenden Block mitscrollt.

Das folgende Beispiel würde dafür sorgen, dass das Hintergrund-Bild fest stehen bleibt, während der Inhalt vor dem Hintergrund weiterhin gescrollt werden kann.


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

Hintergrund-Eigenschaften einkürzen

Wie Sie in den obigen Beispielen sehen können, sind beim Umgang mit den Hintergründen viele Eigenschaften zu beachten. Es ist jedoch auch möglich, alle diese Eigenschaften in einer einzigen Eigenschaft anzugeben, um den Code zu kürzen oder zusätzliche Eingaben zu vermeiden.

Die background-Eigenschaft ist eine zusammenfassende Eigenschaft für alle individuellen Hintergrundeigenschaften. Das heißt background-color, background-image, background-repeat, background-attachment und die background-position können in eine Zeile gepackt werden. Aus folgenden Zeilen:


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

wird durch Kurzschreibweise plötzlich ein kompakter Einzeiler:


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

Bei der Angabe über die Kurzschreibweise sollte immer auf die korrekte Reihenfolge geachtet werden:

background: <Farbe> <Bild> <Wiederholung> <Attachement> <Position>

Wenn der Wert für eine einzelne Hintergrundeigenschaft bei Verwendung der Kurzschreibweise fehlt oder nicht angegeben wird, wird stattdessen der Standardwert für diese Eigenschaft verwendet.

Hinweis: Hintergrund-Definitionen werden nicht wie Farbeigenschaften vererbt. Der Hintergrund des übergeordneten Elements ist als Standard-Wert immer erstmal durchsichtig (transparent). Änderungen müssen also für jedes Element einzeln angegeben werden. Die Nutzung vom *-Selektor ist hierbei nicht zielführend.

CSS Farben

Weiter zu: CSS Schriften

CSS lernen - Hintergründe im CSS festlegen