Show Menu
Cheatography

CSS Background Properties Cheat Sheet by

Eine Übersicht über mögliche Eigenschaften und Werte.

Hinter­gru­ndfarbe

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.

Verläufe als Hinter­gru­ndfarbe

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)
Sollte es bei deinem Browser nicht funkti­oni­eren, dann verzweifle nicht sofot. Eventuell musst du nur den entspr­ech­enden Vendor­-Präfix vorans­tellen. Der Vendor­-Prefix wird vor das linear­-gr­adient gesetzt und dies sieht dann z.B. so
backgr­ound: -webki­t-l­ine­ar-­gra­die­nt(..)
aus.

Verlau­fsr­ich­tung: top

backgr­ound: linear­-gr­adi­ent­(top, #000, #ff1200);

Verlau­fsr­ich­tung: left

backgr­ound: linear­-gr­adi­ent­(left, #000, #ffa200);

Verlau­fsr­ich­tung: top left

backgr­ound: linear­-gr­adi­ent(top left, #000, #ffa200);


Erzeugt einen Verlauf von links oben nach rechts unten.

Verlauf mit positi­oni­erten Colorstops

backgr­ound: linear­-gr­adi­ent­(left, #000 25%, #ffa200 75%);


Erzeugt einen Verlauf, der bis 25% rein Schwarz ist und bis 75% nach Orange verläuft. Ab da sind die restlichen 25% rein Orange.

Multic­olo­rstops

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.

Multic­olo­rstops

backgr­ound: linear­-gr­adi­ent­(left, #000, #f00, #ffa200);


Erzeugt einen dreifa­rbigen Verlauf von links nach rechts mit den Farben Schwarz, Rot und Orange.
Solange keine Positi­oni­erungen angegeben werden, werden die Colorstops gleich­mäßig über die zu füllende Fläche verteilt.

Multic­olo­rstops mit 5 Farben jeweils bei 25%

backgr­ound: linear­-gr­adi­ent­(left, #000 0%, #ff0 25%, #f00 50%, #ff0 75%, #ffa200 100%);

sich wieder­holende Verläufe

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%);
Auch bei repeating- benötigt man die Vendor­-pr­efixe -webki­t-|­-mo­z-|­-o-­|-ms- für die versch­iedenen Browser Engines. Die Eigens­cha­fte­nde­fin­ition kann also reichlich lang werden.
Das ergebnis kann, wenn man sich bei der Farbwahl zu ernsth­aften Augapf­elp­rel­lungen und/oder zu epilep­tischen Anfällen führen.
Ihr wurdet also gewarnt!

Bsp. sich wieder­holende Verläufe

All together now...

Jetzt die Hardcore Variante mit 5 Colorstops an versch­iedenen Positionen mit transp­arenz.

backgr­ound: linear­-gr­adi­ent­(left, rgba(0­,0,0,1) 0%, rgba(2­55,­255­,255,0) 40%, rgba(2­55,­255­,255,1) 50%, rgba(2­55,­255­,255,0) 60%, rgba(0­,0,0,1) 100%);
 

Verläufe mit Transp­arenz

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));
Bsp (von 0% schwarz nach 100 weiß):
linear­-gr­adi­ent­(left, rgba(0­,0,­0,0), rgba(2­55,­255­,25­5,1));

Verlauf mit transp­arenz

Verlauf von 0% schwarz nach 100 weiß

Hinter­gru­ndb­ilder

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

backgr­oun­d-r­epeat

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.
Die Definition repeat ist das Grundv­erh­alten von Hinter­gru­ndb­ildern. Solange nicht anders definiert, werden Hinter­gru­ndb­ilder sowohl horizontal als auch vertikal wieder­holt.

backgr­oun­d-p­osition

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.

backgr­oun­d-size

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
Der Standa­rdwert ist auto

backgr­oun­d-a­tta­chment

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

backgr­oun­d-o­rig­in/clip

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.

Kurzform

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.
Nicht immer funkti­oniert die Kurzform zur Zufrie­denheit auf allen Browsern, daher empfiehlt es sich die Langform zu verwenden.
                   
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Five ways to center DIV element in CSS Cheat Sheet

          More Cheat Sheets by The Exilant

          Sublime Text 3 (german) Keyboard Shortcuts
          Flex Box german Cheat Sheet