Hintergrundfarbe in CSS mit background-color

Um das Design einer Website festzulegen, werden vor allem Hintergrundfarben verwendet. Anders als in früheren Zeiten, wo man noch auf websichere Farben beschränkt war, kann man mittlerweile bedenkenlos einen Farbton aus ca. 16,7 Millionen Farben auswählen und mit CSS allen HTML-Elementen zuweisen. Das früher beim BODY-Tag oder Tabellen verwendete HTML-Attribut bgcolor gilt als deprecated und sollte nicht mehr verwendet werden.

Elemente mit Hintergrundfarbe

Um die Hintergrundfarbe festzulegen, wird in CSS die Eigenschaft background-color verwendet. Sie ist Teil der Shorthand-Eigenschaft background, kann aber auch eigenständig verwendet werden. Die Syntax ist nicht besonders schwierig und ist nachfolgend mit einem Beispiel abgebildet.

CSS-Code mit background-color

Innerhalb des Box-Modells gilt die mit background-color zugewiesene Farbe für die Bereiche content-box, padding und border. Dass die Hintergrundfarbe sich bis zur äußeren Kante des Rahmens erstreckt, erkennt man, wenn man als Rahmen eine Strichlinie wählt, wie das auf der folgenden Abbildung ersichtlich ist.

Hintergrundfarbe im Box-Modell

Art der Farbangabe

Bei der Angabe des Farbwerts hat man die folgenden Möglichkeiten.

  • Über den Farbnamen, z.B. blue, red, green, yellow etc.
  • Als Hexadezimalwert, z.B. #ff0000
  • Als verkürzter Hexadezimalwert, z.B. #f00
  • Als RGB-Wert, z.B. rgb(255,0,0)
  • Als RGBa-Wert mit Alpha-Transparenz, z.B. rgba(255,0,0,0.5)
  • Als HSL-Wert, z.B. hsl(0,100%,50%)
  • Als HSLa-Wert mit Alpha-Tranparenz, z.B. hsla(0,100%,50%,0.5)

Einige Beispiele.

.selektor1 {
background-color: pink;
}

.selektor2 {
background-color: #ccccff;
}

.selektor3 {
background-color: #ccf;
}

.selektor4 {
background-color: rgb(255,0,0);
}

.selektor5 {
background-color: rgba(255,0,0,0.5);
}

.selektor6 {
background-color: hsl(0,100%,50%);
}

.selektor7 {
background-color: hsla(0,100%,50%,0.5);
}

Zumindest bei neueren Browsern sollten die angegebenen Farben entsprechend angezeigt werden. Bei älteren Browsern kann es dagegen passieren, dass gewisse Farbangaben nicht unterstützt werden.