Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

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.

CSS-Eigenschaft: background-color
KurzbeschreibungWerteStandardwertKategorieHinweis
Hintergrundfarbe
  • <color>
  • transparent
  • inherit
transparent
Allgemein:
Farben
Hintergründe
CSS 2.1:
Colors and Backgrounds
CSS 3:
Backgrounds and Borders
 

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 (&nbsp;), 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.
Browserunterstützung von background-color
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu background-color:



Beispiele

HTML:

<div>
   <h1>Überschrift erster Ordnung</h1>
</div>

CSS:

h1 {
   background-color: red;
}
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 7 So sieht's aus:

[Text hinter dem leeren SPAN]
 

HTML:

<div>
   <span>&nbsp;</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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 16. 10. 2017
Render Time: 0.153 sec.

Browser-Marktanteile