CSS Background Properties Cheat Sheet by The Exilant

Die Farbe des Hinter­grunds wird entweder mit einer RGB-De­fin­ition, mit einer Hex-De­fin­ition oder mit gültigen Farbnamen definiert.

Gültiger Farbname: „z.B. „red“, „white“, „black“, „maroon“, etc.
RGB-Fa­rbwert: rgb(0,­255­,168)
Hex-Fa­rbwert: #fff, #f00, 000, etc.
Beispiel:

backgr­oun­d-c­olor: #fff;

Eine Hinter­gru­ndfarbe ersteckt sich grunds­ätzlich über die komplette Fläche.

Es gibt sowohl die Möglic­hkeit einen linearen (gerad­linig) als auch einen radialen (kreis­för­migen) Verlauf mittels CSS zu erzeugen.

Der Syntax hierfür ist…

backgr­ound: linear­-gr­adi­ent­(Ri­cht­ung­,Co­lor­-st­op1­,Co­lor­-st­op2­,...);

Beschä­ftigen wir uns mit den Attributen für die Eigens­chaft. Als erstes kommt die Richtung, den der Verlauf besitzen soll. Standard ist von oben nach unten und muss daher nicht angegeben werden. Gefolgt wird diese von den Farbde­fin­iti­onen. Nutzt man zwei color-­stops, so entsteht ein Verlauf von Farbe eins zu Farbe zwei.

Mögliche Angaben für den Start der Richtung des Verlaufes [alpha­num­mer­isch] sind: top | bottom | left | right
Aber man kann nicht nur horizo­ntale oder vertikale Verläufe damit erzeugen. Kombiniert man die Angaben z.B. top left, so verläuft der Verlauf von oben links, nach unten rechts. Richtungen können aber nicht nur alphan­umm­erisch und somit in Schritten von 45° definiert werden, sondern auch durch die Angabe von Winkel­graden. Standard sind 180° (180deg)

Verläufe sind nicht nur von einer zu einer anderen Farbe erlaubt. Es können beliebig viele Farben hinter­ein­ander angeordnet werden. Hierfür werden die Color-­Stops einfach durch kommas getrennt.
Ebenso, wie bei Verläufen mit zwei Farben, können bei Multic­olo­rstops die Farben positi­oniert werden. Dies funkti­oniert genau so wie bei nur zwei Colors­tops.

Als letzten Punkt kümmern wir uns um Verläufe, die sich mehrfach in einem Element als Hinter­gru­ndbild wieder­holen. Hierzu verwenden wir das prefix repeating- vor der linear­-gr­adi­ent() oder radial­-gr­adi­ent() Defini­tion.

Bsp:

backgr­ound: repeat­ing­-li­nea­r-g­rad­ien­t(top, #000, #ffa200 10%, #fff 20%);

Verläufe können sogar mit Transp­arenzen erstellt werden.

Um Transp­arenz zu verwenden, muss man die rgba()­-Fu­nktion bei den Color-­stops einsetzen. Der letzte Parameter bei der rgba()­-Fu­nktion gibt den Transp­are­nzf­aktor an, als einen Wert zwischen 0 und 1. 0 bedeutet 100% transp­arent, 1 bedeutet 0% transp­arent.

linear­-gr­adi­ent­(Ve­rla­ufs­ric­htung, rgba(r­ota­nte­il,­grü­nan­tei­l,b­lau­ant­eil­,tr­ans­par­enz), rgba(r­ota­nte­il,­grü­nan­tei­l,b­lau­ant­eil­,tr­ans­par­enz));

Um ein Bild als Hinter­grund zu setzen, benötigt man die Eigens­chaft backgr­oun­d-i­mage. Die Definition des Hinter­gru­ndb­ilders hat den Syntax url(…/­pfa­d/z­ur/­bil­dda­tei.png‘);
Beispiel:

backgr­oun­d-i­mage: url('../p­fad­/zu­r/b­ild­dat­ei.p­ng');

Für Hinter­gru­ndb­ilder gibt es noch weitere Eigens­cha­ften, die definiert werden können, z.B. dessen Größe, ob sich ein Hinter­gru­ndbild wieder­holt, oder nicht, wie es positi­oniert ist, ob es mitscr­ollt, oder fixiert angezeigt wird. Behandeln wir diese Eigens­chaften genauer. Die Eigens­chaften für Hinter­gru­ndb­ilder sind:

backgr­oun­d-r­epeat
backgr­oun­d-p­osition
backgr­oun­d-a­tta­chment
backgr­oun­d-o­rigin
backgr­oun­d-clip
backgr­oun­d-size

Von Haus aus wird ein Hinter­gru­ndb­ilder sowohl horizontal als auch vertikal wieder­holt. Eingrenzen oder ganz abschalten kann man diese Wieder­hol­ungen mit der Eigens­chaft backgr­oun­d-r­epeat. Die dazuge­hörigen Defini­tionen sind repeat­|no­-re­pea­t|r­epe­at-­x|r­epe­at-y.

Ist die Definition no-repeat gesetzt, wird der Hinter­grund nur ein einziges mal angezeigt.
Ist die Definition repeat-x gesetzt, wird das Hinter­gru­ndbild nur horizontal wieder­holt.
Ist die Definition repeat-y gesetzt, wird das Hinter­gru­ndbild nur vertikal wieder­holt.

Mit der Eigens­chaft backgr­oun­d-p­osition können wir bestimmen, wo ein Hinter­gru­ndbild angezeigt wird. Standa­rde­ins­tellung ist, dass Hinter­gru­ndb­ilder links oben beginnen und dann sowohl horizontal als auch vertikal wiederholt werden. Der Syntax erlaubt, dass man zwei Werte setzen kann. Der erste Wert definiert die horizo­ntale Ausric­htung, der zweite Wert definiert die vertikale Ausric­htung. Weiter gibt es mehrere Wertes­ysteme mit der die Ausric­htung definiert werden kann.

Alphan­umm­erische Ausric­htung:
Das bekann­teste ist sicherlich die Ausric­htung mit alphan­umm­eri­schen Werten.
Horizo­ntal: top | center | bottom
Vertikal: left | center | right

Ausric­htung mit Prozen­twe­rten:
Es ist aber auch möglich mittels Prozen­twerten ein Hinter­gru­ndbild zu positi­oni­eren. Der erste Wert bestimmt die horizo­ntale Ausric­htung, der zweite Wert die vertikale. Die Werte 0% 0% positi­onieren das Hinter­gru­ndbild oben links, 100% 100% positi­onieren es unten rechts. Wird nur der horizo­ntale Wert gesetzt, ist der vertikale Wert automa­tisch 50%.

Ausric­htung mit fixen Werten:
Wie schon im vorher­geh­enden Beispiel mit Prozen­twe­rten, können Hinter­gru­ndb­ilder auch mittels fixen Werten positi­oniert werden. Dabei kann jede CSS-Ma­ßei­nheit verwendet werden. Auch ist es möglich alphan­umm­erische Angaben, Prozen­twerte und fixe Werte zu mischen. Wird nur ein Wert angegeben, so ist die vertikale Ausric­htung standa­rdmäßig mittig im Element.

Gleich eine Vorbem­erkung. Setzen des Wertes backgr­oun­d-size ist sinnvoll, wenn man dazu die Vendor Präfixe ebenfalls setzt. Laut dem W3c kann Chrome die Eigens­chaft ab Version 1.0 (ab 4.0 ohne Präfix), Edge ab Version 12.0, der IE ab V. 9.0, Safari ab 4.1 (ab 3.0 mit Präfix -webkit-) und Opera ab 10.5 und der Firefox ab V. 4.0 (mit Präfix -moz- ab V. 3.6

Die Werte für backgr­oun­d-size sind auto | length | percentage | cover | contain | initial | inherit

Die Eigens­chaft backgr­oun­d-a­tta­chment bestimmt ob ein Hinter­gru­ndbild fest positi­oniert ist, oder mit dem Inhalt mitscr­ollt. Ich habe hier absich­tlich nicht Seiten­inhalt sondern nur Inhalt geschr­ieben, weil es hier einen Unters­chied gibt. Es gibt eine Defini­tion, welche das Scroll­ver­halten bezüglich auf das umschl­ießende Element regeln und auf die gesamte Seite.

fixed /fixiert an der defini­erten Position
scroll /scrollt mit (Stand­ard­ver­halten)
local /scrollt entlang des Elemen­tin­haltes
inherit /Erbt die Eigens­chaften des Eltern­ele­mentes

Die Eigens­chaften backgr­oun­d-o­rigin und backbg­rou­nd-clip in Kombin­ation ergeben eine Vielzahl an intere­ssanten Möglic­hkeiten um die Platzi­erung eines Hinter­gru­ndb­ildes zu bestimmen.
Mit backgr­oun­d-o­rigin legt man fest, wo sich die obere linke Ecke eines sich nicht wieder­hol­enden Hinter­gru­ndb­ildes befinden soll.

Sowohl die Eigens­chaft backgr­oun­d-color als auch backgr­oun­d-image können in Kurform ausged­rückt werden. Der Browser sollte dann trotzdem in der Lage sein aus den Werten das gewünschte Ersche­inu­ngsbild zu erzeugen.

Bsp:

backgr­ound: url("../­pf­ad/­zur­/bi­lda­tei.pn­g") linear­-gr­adi­ent­(to­p,#­54C9F0  ,#0CB9F2) no-repeat top center cover;

In diesem Beispiel haben wir sowohl ein Hnterg­run­dbild, als auch einen Verlauf, von oben nach unten, definiert. Das Hinter­gru­ndbild wird nicht wieder­holt, oben und mittig ausger­ichtet und soll den gesamten Viewport abdecken.