CSS, HTML und Javascript mit {stil}

CSS background, background-color

CSS Background, background color, background image

background ist die Kurzschrift für alle CSS-Eigenschaften des Hintergrunds.

CSS background-color gibt die Farbe für den Hintergrund an, entweder als Hex-Wert, als RGB- oder HSL-Wert oder als Farbname wie green, purple oder cornflowerblue. Dabei gilt die vollständige Größe des Elements als background: inklusive padding und border, aber ohne margin.

Die CSS-Kurzschrift (shorthand) background fasst alle Eigenschaften des Hintergrunds zusammen:

  • background-color,
  • background-image,
  • background-repeat,
  • background-attachment
  • background-position.

CSS background

background kann gleichzeitig eine Hintergrundfarbe und ein / mehrere Hintergrundbilder festlegen. Bei Bildern ohne Hintergrund (png, gif oder svg) zeigt sich die Hintergrundfarbe hinter den transparenten Bildregionen.

body { background: 
       blue url(mix.png) bottom right no-repeat fixed; }
         ^        ^        ^      ^       ^       ^
         |        |        |      |       |       +- background-
         |        |        |      |       |          attachment
         |        |        |      |       +- background-repeat
         |        |        |      |
         |        |        |      +- background-position
         |        |        |
         |        |        +- background-position
         |        |
         |        +- background-image
         | 
         +- background-color   

Da sich background über die gesamte Breite inkl. padding und border erstreckt, scheinen Hintergrundfarben und Hintergrundbilder auch durch die transparenten Bereiche von border und border-image, so wie hier bei border-style:dotted.

.demo { 
    padding: 10px; 
    border: 20px dotted #EDFFEC; 
    background-color: #B89EB8;
}

Damit background-color bzw. background-image sichtbar werden, muss das Element eine eigene Höhe haben. Ein ul- oder div-Element, in dem die inneliegenden Elemente mit CSS float definiert sind, hat keine eigene Höhe!

background-color

background-color kann (genauso wie background-image) jedem Element zugewiesen werden: Block-Elementen wie div oder ul und inline-Elementen wie a oder em.

Da Hintergrundfarben einzelnen Elementen zugewiesen werden könnnen, kann es mehr als eine Hintergrundfarbe in einem Dokument geben und Elemente mit einer Hintergrundfarbe können über Elementen mit einem anderen Hintergrund liegen.

Dabei überdeckt die Hintergrundfarbe eines Elements mit einem höheren z-index bei absolut positionierten Elementen die darunter liegenden Elemente.

Mit RGBA- und HSLA-Werten wird der Hintergrund semitransparent – häufig eingesetzt z.B. als Hintergrund für Slideshows oder modale Fenster.

<div style="background-color: hsla(30,40%,90%,0.5)> … </div>

background-color animieren

Mit CSS transition läßt sich background-color animieren.

HOVER!
.animebox { 
	background-color: honeydew;
	transition:background 1s 
}
.animebox:hover {
	background-color: cornflowerblue
}
.anime {
background-color: cornflowerblue
}
background-color
Hintergrundfarbe eines Elements.
Werte
transparent | <color> | none
transparent (Voreinstellung)
macht den Hintergrund vollkommen durchsichtig, so dass eventuell darunter liegende Bereiche sichtbar werden.
<color>
ist entweder das Schlüsselwort für eine Farbe (red), die sechsstellige Hexadezimalzahl (#FFFFFF) oder ein Tripel aus RGB-Werten (255,255,255) oder HSL-Werten (60,25%,50%). Als sicher gelten nur Hex-Angaben und RGB-Werte, während HSL-Werte von älteren Browsern (sprich: vor IE9) nicht unterstützt werden (CSS Color).
none
löscht zuvor vereinbarte Hintergrundbilder oder -farben.

background-color:transparent und background-color:none haben dieselbe Wirkung: Sie entfernen Hintergrundfarben und Hintergrundbilder.