CSS 2.1: `background-color`

Erläuterungen

Die Eigenschaft background-color ist ein Teil der Kurzschrift- Eigenschaft background. Durch sie wird eine durchgehende, einheitliche Hintergrundfarbe für ein Element festgelegt.

Diese Eigenschaft steht als Ersatz für das HTML-Attribut bgcolor, das für das Element body und für Tabellenelemente anwendbar ~~ist~~ war. bgcolor ist heute als deprecated eingestuft. Im Unterschied dazu kann background-color auf jedes Element angewendet werden.

Alle Hintergrundeigenschaften unterlegen die Fläche des Inhalts eines Elements, die padding-Fläche und die durch den Rahmen eines Elementes belegte Fläche.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'background-color' <color> | transparent | inherit

Tipps:

An den Farbbeispielen kann man bereits erkennen, dass die Farbe des Hintergrunds einen nicht zu unterschätzenden Einfluß auf die Lesbarkeit eines Textes hat, insbesondere für Menschen mit einer Farbsehschwäche. Zudem gibt es für Farben keine Ausgangswerte, die Initialeinstellungen sind vom Browser abhängig. Deshalb sollte man immer sowohl die Farbe für den Vordergrund als auch für den Hintergrund deklarieren. Dies ist ein Grundsatz, der selbst bei prominenten Websites oft vergessen wird.

Unterlegt man Absätze oder Überschriften mit einer Hintergrundfarbe, macht es sich besser, wenn man noch einige Pixel padding dazugibt. Dadurch sitzen die Schriftzeichen nicht direkt am Rand der farbigen Fläche.

<color>

Farbwert als Hexadezimalangabe (#rrggbb)
Farbwert als Hexadezimalkurzangabe (#rgb)
Prozentangaben (rrr.r%,ggg.g%,bbb.b%)
direkte RGB-Werte (rrr,ggg,bbb)
Farbnamen (Hier sind nur die 17 Farben
maroon , red , orange , yellow , olive ,
purple , fuchsia , white , lime , green ,
navy , blue , aqua , teal ,
black , silver , gray
sowie die Systemfarben im Standard definiert. Fast alle dieser Farben werden von den heute gängigen Browsern mit den korrekten RGB-Werten dargestellt. Dasselbe gilt auch für die meisten der bereits 1996 eingeführten X11-Farbnamen — die jedoch nicht standard- konform sind. Deshalb ist es empfehlenswert, stets die RGB- oder Hexadezimalangaben zu verwenden, um eine konsistente Farbdarstellung zwischen den verschiedenen Browsern zu erreichen.

Mehr Informationen über Farben in CSS finden Sie im Grundlagenartikel Farbwerte.

<transparent> (Ausgangswert)

Dieser Wert lässt den Hintergrund des Elternelementes durchscheinen.

inherit

Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

BODY {background-color: #ffffff;}

Browserunterstützung

Die Eigenschaft background-color wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

IE/Win 5.x, IE/Win 6, IE 7: IE/Win ignoriert den Wert inherit. Innerhalb der Farbbezeichnungen nach SVG-1.0 akzeptiert IE/Win Grautöne nur mit der Bezeichnung '...gray...', nicht in der Schreibweise '...grey...'.
Konqueror 3.5: Konqueror erkennt innerhalb der Farbbezeichnungen nach SVG-1.0 auch Grautöne in der Schreibweise '...grey...'. Ausnahme: der Wert grey selbst wird wie silver interpretiert.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

background, background-attachment, background-image, background-position, background-repeat

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Hintergrundeigenschaften werden von den meisten Mobilgeräten nicht dargestellt und es muss auch aufgrund der eingeschränkten Farbwiedergabe von der Verwendung dieser Eigenschaften in Stylesheets für handheld abgeraten werden.

Weitere Charakteristika:

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangs- wert:	Berechneter Wert:	Vererbung:	Anwendbar- keit:	%-Bezugs- wert:	Medien- gruppe(n):
`transparent`	Spezifizierter Wert	Nein	Auf alle Elemente	Nicht zutreffend	Visual

Ausblick:

Im geplanten CSS3-Modul 'Color' gibt es einige neue Ansätze, Farben für Websites zu definieren. Als erstes fällt auf, dass Farbwerte auch mit der zusätzlichen Angabe des Alpha-Kanals, d.h. der Opazität, definiert werden können (RGBa). Auch die Möglichkeit, HSL- und HSLa-Farbwerte zu notieren, ist neu.

Nicht neu, aber dann auch in den Standard aufgenommen, ist der Satz der X11-Farbnamen.

Zu den bereits bekannten aus dem System des Benutzers abgeleiteten Farben kommen zusätzliche Werte für Hyperlinks.