Farben und Hintergründe
color | background-color | background-image | background-repeat | background-attachment | background-position | background
colorzur Übersicht 
Mit der Eigenschaft color wird die Textfarbe (Vordergrundfarbe) definiert.
Werte
Die Farbwerte können unterschiedlich angegeben werden. Die gängiste ist den Farbwert hexadezimal anzugeben. Für jede Farbe, Rot, Grün und Blau, stehen jeweils zwei Werte zwischen 0 und F zur Verfügung. Es ergibt sich daraus ein sechsstelliger Wert, der mit einer Raute eingeleitet wird. Wenn bei den einzelnen Farben die Werte gleich sind, können sie zu jeweils einem Wert zusammen gefasst werden: #993300 entspricht #930.
Eine weitere Möglichkeit ist die prozentuale Angabe der Farbwerte. Hierbei werden die einzelnen Werte zwischen 0% und 100% wiedergegeben. Die Angabe
color: rgb(100%, 0%, 0%) gibt die Farbe Rot an.
Als eine Variante der hexadezimalen Angabe sind Dezimalwerte zwischen 0 und 255. Die Angabe
color: rgb(255, 0, 0) ergibt ebenfalls die Farbe Rot.
Als Letztes sind auch Schlüsselwörter nach den VGA Standarts möglich. Diese umfassen aber nur 16 Farben: aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, tea, white und yellow. Mit CSS 2.1 werden diese noch um orange ergänzt.
Es gibt keinen Standardwert. Dies ist von den Voreinstellungen des Browsers abhängig, in der Regel ist es jedoch Schwarz. Der Benutzer kann die Einstellung jederzeit verändern.
Vererbung
Ja
Beispiel
p{ color: #56562c;}
.rot{ color: #993300;}
background-colorzur Übersicht
Die gesetzte Eigenschaft background-color definiert die Hintergrundfarbe des Elements.
Werte
transparent | [Farbwerte wie unter color beschrieben] | inherit
Standardwert ist transparent
Vererbung
Nein
Beispiel
p{ background-color: #ffcc66;}
background-imagezur Übersicht
Mit background-image kann ein Hintergrundbild festgelegt werden.
Werte
url | none | inherit
Standardwert ist none
Vererbung
Nein
Beispiel
table{ background-image: url(bilder/hintergrund.jpg);}
background-repeatzur Übersicht
Mit background-repeat wird bestimmt, ob und welche Richtung sich die Hintergrund Grafik wiederholen (kacheln) soll.
Werte
no-repeat | repeat | repeat-x | repeat-y | inherit
Der Wert no-repeat unterbindet Wiederholungen. repeat wiederholt die Grafik in vertikaler und horizontaler Richtung.
Eine horizontale Wiederholung erreicht man mit repeat-x, vertikales Kacheln mit repeat-y.
Standardwert ist repeat
Vererbung
Nein
Beispiel
div{
background-image: url(bilder/hintergrund.jpg);
background-repeat: repeat-x;
}
background-attachmentzur Übersicht
Die Eigenschaft background-attachment legt fest, ob der Hintergrund mit der Seite scrollbar ist oder fixiert bleibt.
Werte
scroll | fixed | inherit
Die gesetzte Eigenschaft background-attachment führt bei den meisten Browser mit anderen Elementen
außer body zu Darstellungsfehlern. Besser man beschränkt den Einsatz dieser Eigenschaft auf den body.
Standardwert ist scroll
Vererbung
Nein
Beispiel
body{
background-image: url(bilder/hintergrund.jpg);
background-attachment: fixed;
}
background-positionzur Übersicht
Wie der Hintergrund auf der Seite positioniert werden soll, wird mit der Eigenschaft background-position festgelegt.
Werte
[Horizontalwert] | [Vertikalwert]
left top | right top| center top| left bottom| right bottom | center bottom | center | inherit
Als Werte werden positive und negative numerische Werte akzeptiert, Prozentangaben und die oben angeführten Schlüsselwörter. Werden zwei Werte angegeben, so steht der erste für die horizontale und der zweite für die vertikale Position. Bei nur einem angegeben Wert bestimmt dieser die horizontale Position. Der vertikale Wert ist dann automatisch auf 50% gesetzt.
Standardwert ist die linke obere Ecke des Elements
Vererbung
Nein
Beispiel
body{
background-image: url(bilder/hintergrund.jpg);
background-position: left top;
}
backgroundzur Übersicht
Unter der Eigenschaft background werden alle Hintergrundeigenschaften in Kurzform zusammen gefasst.
Werte
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position] | inherit
Bei allen Werten , die nicht explizit angegeben werden, werden die Standardwerte der einzelnen Eigenschaften gesetzt.
Kein Standardwert
Vererbung
Nein
Beispiel
body{ background: #ffcc66 url(bilder/hintergrund.jpg) repeat-x fixed left top;}