Hintergrund - CSS-Tricks | CSS-Almanach 2025

Mit der backgroundEigenschaft in CSS können Sie den Hintergrund eines Elements steuern (was unter dem Inhalt in diesem Element gezeichnet wird). Es handelt sich um eine Kurzform-Eigenschaft, mit der Sie mehrere CSS-Eigenschaften in eine schreiben können. So was:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background besteht aus acht weiteren Eigenschaften:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Sie können eine beliebige Kombination dieser Eigenschaften in nahezu beliebiger Reihenfolge verwenden (obwohl die in der Spezifikation empfohlene Reihenfolge oben angegeben ist). Es gibt jedoch ein Problem: Alles, was Sie nicht in der backgroundEigenschaft angeben, wird automatisch auf den Standardwert gesetzt. Also, wenn Sie so etwas tun:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Der Hintergrund ist transparent statt rot. Die Lösung ist einfach , aber: nur definiert background-colornach background, oder verwenden Sie einfach die Kurz (zB background: url(… ) red;)

Mehrere Hintergründe

CSS3 fügte Unterstützung für mehrere Hintergründe hinzu, die übereinander liegen. Jede Eigenschaft, die sich auf Hintergründe bezieht, kann eine durch Kommas getrennte Liste enthalten, wie folgt:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Jeder Wert in der durch Kommas getrennten Liste entspricht einer Ebene: Der erste Wert ist die oberste Ebene, der zweite Wert ist die zweite Ebene und die Hintergrundfarbe ist immer die letzte Ebene.

Rezepte

Siehe den Stift emBzRd von Timothy Miller (@tjacobdesign) auf CodePen.

Browser-Unterstützung

Die Unterstützung variiert zwischen den verschiedenen spezifischen Eigenschaften, und jeder entsprechende Artikel im Almanach enthält eindeutige Hinweise zur Browserunterstützung. Grundlegende einfarbige Hintergründe und einzelne Bilder funktionieren jedoch überall, und alles, was nicht unterstützt wird, greift einfach auf das nächstbeste zurück, egal ob es sich um ein Bild oder eine Farbe handelt.