CSS-Eigenschaft: background-color, Kategorien: Farben (allgemein), Hintergründe (allgemein), Colors and Backgrounds (CSS 2.1), Backgrounds and Borders (CSS 3)
Hintergrundfarbe
Bestimmt die Hintergrundfarbe eines HTML-Tags.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Hintergrundfarbe |
| transparent |
|
Verwandte Eigenschaften aus der Kategorie: Farben (allgemein), Hintergründe (allgemein), Colors and Backgrounds (CSS 2.1), Backgrounds and Borders (CSS 3):
- background
- background-attachment
- background-clip
- Aktuelle Seite: background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- box-shadow
- color
- opacity
- outline-color
- text-decoration-color
Folgendes ist beim Einsatz von background-color zu beachten:
Die Hintergrundfarbe ist zwar eine relativ einfach einsetzbare Eigenschaft, beim Einsatz ist allerdings Folgendes zu beachten:
- In Block-Elementen wird der komplette Block mit der Hintergrundfarbe ausgefüllt.
- Bei Inline-Elementen wird nur der eigentliche Text mit der Hintergrundfarbe hinterlegt.
- Hat man ein leeres Inline-Element, wie das <span> </span> unten im Beispiel Nr. 7, kommt es durch fehlenden Text zu keiner Hintergrundfarbe. Hier braucht man mindestens ein geschütztes Leerzeichen ( ), um eine Hintergrundfarbe angezeigt zu bekommen.
- Falls die Hintergrundfarbe vererbt wurde, kann diese durch den Parameter "transparent" wieder aufgelöst werden. Im Beispiel haben alle SPAN-Tags einen schwarzen Unterstrich, im Beispiel Nr. 5 hat das SPAN die Eigenschaft "transparent", dadurch wird das vererbte blau wieder deaktiviert.
- Die Schreibweise der Farbangabe ist in den Beispielen unterschiedlich vorgenommen, Farbewerte können mit unterschiedlicher Syntax angegeben werden. Unterschiedliche Schreibweisen sind unter color beschrieben.
- Wird die Hintergrundfarbe über eine rgb-Anweisung gesetzt, darf zwischen rgb und den Klammern () keine Leerzeichen sein.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu background-color:
- W3C Spezifikation:
http://www.w3.org/TR/css3-background/#background-color
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
background-clip - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
background-image
Beispiele
HTML:
<div>
<h1>Überschrift erster Ordnung</h1>
</div>CSS:
h1 {
background-color: red;
}Beispiel nur für: 
Beispiel Nr. 1 So sieht's aus:
Überschrift erster Ordnung
HTML:
<div>
<p>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>CSS:
p {
background-color: #ccc;
}
/* Beispiel für die Kurzschreibweise eines Hexa-Dezimal-Wertes. */Beispiel nur für:
Beispiel Nr. 2 So sieht's aus:
Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.
HTML:
<div>
<p>Es hat lange gedauert,
<strong>bis ich begriffen habe,</strong>
was es bedeutet, ein blinder Text zu sein.</p>
</div>CSS:
strong {
background-color: fuchsia;
}Beispiel nur für:
Beispiel Nr. 3 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein.
HTML:
<div>
<span>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</span>
<br>
<br>
<p>Es hat lange gedauert,
<strong>bis ich
<span>begriffen</span> habe
</strong>, was es bedeutet, ein blinder Text zu sein.</p>
</div>CSS:
span {
background-color: blue;
border-bottom: 5px solid black;
}
/* Die scharze "border-bottom" dient der Hervorhebung im Beispiel. */Beispiel nur für:
Beispiel Nr. 4 So sieht's aus:
Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.
Es hat lange gedauert, bis ich begriffen habe , was es bedeutet, ein blinder Text zu sein.
HTML:
<div>
<p>Es hat lange gedauert,
<strong>bis ich
<span class="noBg">begriffen</span> habe
</strong>, was es bedeutet, ein blinder Text zu sein.</p>
</div>CSS:
strong span.noBg {
background-color: transparent;
}
/* Soll eine gesetzte Farbe zurück gesetzt werden, ist das Schlüsselwort "transparent" einzusetzen. Ohne diese Angabe wäre der schwarz unterstrichene Bereich blau, weil im Beispiel Nr. 4 so vergeben. */Beispiel nur für:
Beispiel Nr. 5 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe , was es bedeutet, ein blinder Text zu sein.
HTML:
<div>
<div class="box">Es hat lange <strong>gedauert</strong>, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein. </div>
</div>CSS:
div.box {
background-color: #00FF80;
width: 100%;
}
/* in diesem Beipiel geht es lediglich um die andere Schreibweise des Farbwerts. */Beispiel nur für:
Beispiel Nr. 6 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein.
HTML:
<div>
<span> </span>
[Text hinter dem leeren SPAN]
</div>CSS:
/* Drei Beispiele zuvor wurde für SPAN die Hintergrundfrabe blau vergeben.
Bei Inline-Elementen wir nur tatsächlich vorhandener Text hinterlegt.
Das Beispiel zeigt: Wenn kenn Text da ist, wird auch nichts hinterlegt! */Beispiel nur für:
Beispiel Nr. 7 So sieht's aus:
[Text hinter dem leeren SPAN]
HTML:
<div>
<span> </span>
</div>CSS:
/* Im Gegensatz zum letzten Beispiel ist hier statt einem Leerzeichen ein "geschütztes Leerzeichen" eingefügt. Das reicht, um eine Hintergrundfarbe anzunehmen. */Beispiel nur für:
Beispiel Nr. 8 So sieht's aus:
HTML:
<div>
<p class="rgb">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>CSS:
p.rgb {
background-color: rgb(255,255,0);
}
/* Beispiel für eine rgb-Angabe mit absoluten Zahlen. */Beispiel nur für:
Beispiel Nr. 9 So sieht's aus:
Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.
HTML:
<div>
<h2>Überschrift zweiter Ordnung</h2>
</div>CSS:
h2 {
background-color: rgb(20%,20%,100%);
}
/* Beispiel für eine rgb-Angabe mit relativen Zahlen. */Beispiel nur für:
Beispiel Nr. 10 So sieht's aus:
Überschrift zweiter Ordnung
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!