- die Online CSS Referenz
Impressum

Farben und Hintergründe

color | background-color | background-image | background-repeat | background-attachment | background-position | background

colorzur Übersicht    eins nach unten

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;}

color

background-colorzur Übersichteins nach obeneins nach unten

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-color

background-imagezur Übersichteins nach obeneins nach unten

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-image

background-repeatzur Übersichteins nach obeneins nach unten

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-repeat

background-attachmentzur Übersichteins nach obeneins nach unten

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 Übersichteins nach obeneins nach unten

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 Übersichteins nach oben    

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;}