CSS-Hintergrund

Mit den CSS-Eigenschaften <background> können Farben, Bilder und Verläufe für den Hintergrund von Elementen festgelegt werden. Damit lassen sich von einfachen Rahmen bis hin zu komplexen visuellen Effekten vielfältige Lösungen umsetzen.

Hintergrundfarben

Die einfachste Hintergrundangabe erfolgt mit <background-color>. Jede Farbe kann im HEX-, RGB-, HSL- oder Namensformat angegeben werden.

Im folgenden Beispiel erhält ein <div>-Element eine hellblaue Hintergrundfarbe:

Hintergrundbilder und Verläufe

Mit <background-image> kann ein Bild festgelegt werden, während die Kurzschreibweise <background> auch Verläufe unterstützt. Auch Wiederholung und Skalierung von Bildern können gesteuert werden.

Hintergrund-Positionierung und -Skalierung

Mit den Eigenschaften <background-repeat>, <background-size> und <background-position> kann genau festgelegt werden, wie das Hintergrundbild angezeigt wird. Zum Beispiel füllt cover das gesamte Element aus, während contain die Proportionen beibehält.

Mehrere Hintergründe

In CSS können mehrere Hintergründe gleichzeitig festgelegt werden. Zum Beispiel können Bilder und Verläufe in einer einzigen background-Deklaration kombiniert werden.

Background-attachment

Mit der Eigenschaft background-attachment können wir steuern, ob der Hintergrund im Viewport fixiert bleibt (Parallax-Effekt) oder sich mit dem Inhalt bewegt.

Verwendung der Kurzschreibweise für background

Mit der Kurzschreibweise background können wir Farbe, Bild, Position, Größe, Wiederholung und Attachment in einer einzigen Zeile angeben.

Tipps zur Verwendung von Hintergründen

Hintergrundeigenschaften können auf viele kreative Arten kombiniert werden. Hier einige Tipps:

• Verwende Verläufe für moderne und responsive Hintergründe.
• Optimiere große Hintergrundbilder, damit sie das Laden nicht verlangsamen.
• Kombiniere mehrere Hintergrundebenen mit der Kurzschreibweise <background>, um komplexere Effekte zu erzielen.