CSS-Referenz
1. Farben und Hintergrund
- 1.1 color
- 1.2 background-color
- 1.3 background-image
- 1.4 background-repeat
- 1.5 background-position
- 1.6 background-attachment
- 1.7 background (Kurzform)
Diese Eigenschaften sind bereits seit CSS1 definiert und werden von allen Browsern ordentlich unterstützt.
1.1 color
Legt die Vordergrundfarbe fest [CSS1].
Beispiel:
h1 {color: #660000;}
| Werte | Farbe| inherit |
| Default | abhängig von Voreinstellungen |
| Vererbt | ja |
1.2 background-color
Legt die Hintergrundfarbe fest [CSS1].
Beispiel:
h1 {background-color: #ffffee;}
| Werte | Farbe | transparent | inherit |
| Default | transparent |
| Vererbt | nein |
Die Angabe transparent bewirkt das Durchscheinen der Hintergrundfarbe eines übergeordneten Elements.
Da hierbei die optische Anordnung auschlaggebend ist (statt der Hierarchie des Dokumentenbaums), kann es zu Kontrastproblemen kommen, deshalb wird diese Angabe vom W3C-Validator mit einer Warnung quittiert.
1.3 background-image
Weist ein Hintergrundbild zu [CSS1].
Beispiel:
body {background-image: url(../img/hg-bild.gif);}
| Werte | URI | none | inherit |
| Default | none |
| Vererbt | nein |
Geben Sie URI am besten ohne Anführungszeichen an, um Browser-Probleme zu vermeiden.
Relative Pfadangaben beziehen sich immer auf die aufrufende Datei.
1.4 background-repeat
Bestimmt, ob ein Hintergrundbild mehrfach (gekachelt) oder nur einmal angezeigt wird [CSS1].
Beispiel:
body {background-repeat: repeat-y;}
| Werte | repeat | repeat-x | repeat-y | no-repeat | inherit |
| Default | repeat |
| Vererbt | nein |
Die Wiederholung kann für beide Richtungen (repeat), nur horizontal (repeat-x) oder vertikal (repeat-y) zugewiesen werden. Man kann sie aber auch komplett unterbinden (no-repeat).
1.5 background-position
Bestimmt die Startposition eines Hintergrundbildes [CSS1].
Beispiel:
body {background-position: left top;}
| Werte | Längenangabe | Prozentwert | top | right | bottom | left | center | inherit |
| Default | 0% 0% |
| Vererbt | nein |
Prozentwerte, Längenangaben oder Schlüsselwörter können einzeln oder paarweise angegeben werden. Erst seit CSS2.1 dürfen die Werte auch kombiniert werden (ältere Browser könnten damit also Probleme haben).
Negative Werte für die Positionierung sind ebenfalls erlaubt.
1.6 background-attachment
Bestimmt, ob das Hintergrundbild feststeht oder mit dem Inhalt gescrollt wird [CSS1].
Beispiel:
#box {background-attachment: fixed;}
| Werte | scroll | fixed | inherit |
| Default | scroll |
| Vererbt | nein |
IE/win unterstützt diese Eigenschaft nur für das Element body.
1.7 background (zusammenfassend)
Hintergrund-Eigenschaften lassen sich in einer Kurzform notieren [CSS1].
Beispiel:
body {background: #fff url(img/hg.gif) 0% repeat fixed;}
| Werte | siehe einzelne Eigenschaften |
| Default | siehe einzelne Eigenschaften |
| Vererbt | nein |
Die Reihenfolge der Angaben spielt keine Rolle, da die Eigenschaften durch ihre Werte eindeutig identifiziert werden.
Fehlende Teileigenschaften nehmen den Default-Wert an.
