background – CSS für den Hintergrund
CSS background-color ist die Farbe für den Hintergrund, geschrieben 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.
So ziemlich jedes HTML-Element kann einen Hintergrund haben – vom body-Element über all die allumfassenden div-Tags bis hin zur schlichten Linie mit einem HTML hr und selbst die Eingabefelder von Formularen. Hintergrundfarbe und Hintergrundbild gibt es für Bilder und auch für inline-Elemente wie a oder span.
Die CSS-Kurzschrift (shorthand) background fasst alle Eigenschaften des Hintergrunds zusammen:
- background-color,
- background-image,
- background-repeat,
- background-attachment,
- background-origin,
- background-size,
- background-position.
hr {
height: 50px;
background: url(stein.svg);
}
CSS background Syntax
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.
background-attachment ─┐
|
body { background: ▼
blue url(mix.png) bottom right no-repeat fixed; }
▲ ▲ ▲ ▲ ▲
│ │ │ │ └- 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!
Am Rande: Probleme mit background-attachment und fixed mit iOS und Samsung (Can I use).
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.
.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.
