Die in diesem Abschnitt vorgestellten Eigenschaften geben Ihnen Möglichkeiten an die Hand, Ihre Websites farblich aufzupeppen. Farben sind für eine Webseite von großer Bedeutung. Zum einen beeinflussen Farben die optische Erscheinung wesentlich, zum anderen sind sie wichtig, um die Übersichtlichkeit und den Aufbau der Seite zu unterstützen.
Vordergrundfarbe: Die Eigenschaft color
Die Eigenschaft color
bestimmt die
Vordergrundfarbe eines Elements, die als Schriftfarbe verwendet wird.
Werte | <Farbe>, inherit |
---|---|
Initialwert | browserabhängig |
Vererbung | ja |
Anwendung | global |
Beispiel:
p.warnung { color: red; background-color: white; }
Browserunterstützung
Die Eigenschaft color
wird von
allen modernen Browsern unterstützt mit folgender
Einschränkung:
- Internet Explorer 6 und 7
- IE ignoriert bis Version 7 den Wert
inherit
.
Hintergrundfarbe: Die Eigenschaft background-color
Die Eigenschaft background-color
bestimmt die Hintergrundfarbe eines Elements.
Werte | <Farbe>, transparent , inherit |
---|---|
Initialwert | transparent |
Vererbung | nein |
Anwendung | global |
Beispiel:
p.warnung { color: red; background-color: white; }
Das Schlüsselwort transparent
legt
fest, dass ein Element einen transparenten Hintergrund hat,
darunterliegende Farben und Inhalte somit durchscheinen.
Die Eigenschaften color
und
background-color
sollten Sie immer
zusammen angeben. Angenommen, Sie deklarieren für ein
Element eine Hintergrundfarbe, die in Ton und Helligkeit der
Farbe ähnelt, die ein Besucher Ihrer Seite in seinem Browser
für die Vordergrundfarbe eingestellt hat. Der Nutzer
würde dann nichts mehr lesen können. Achten Sie daher
darauf, dass Vorder- und Hintergrundfarben stets ausreichend
kontrastieren.
Browserunterstützung
Die Eigenschaft background-color
wird von allen modernen Browsern unterstützt mit folgender
Einschränkung:
- Internet Explorer 6 und 7
- IE ignoriert bis Version 7 den Wert
inherit
.
Hintergrundbild: Die Eigenschaft background-image
Die Eigenschaft background-image
gibt
das Hintergrundbild eines Elements an.
Werte | <URI>, none , inherit |
---|---|
Initialwert | none |
Vererbung | nein |
Anwendung | global |
Beispiel:
body { color: red; background-color: white; background-image: url(redbox.gif); }
Sie sollten stets zusätzlich eine Hintergrundfarbe im Grundton des Bilds angeben, um extreme Kontraste zwischen dem Zustand vor und nach dem Laden der Grafik zu vermeiden. Transparente Teile des Hintergrundbilds lassen die Hintergrundfarbe oder den Hintergrund eines Vorfahrenelements durchscheinen.
Im Allgemeinen werden Hintergrundbilder gekachelt, also über
die gesamte Anzeigefläche nebeneinandergelegt. Dieses
Verhalten ist über die Eigenschaft background-repeat
steuerbar.
Hintergrundbilder sind nicht skalierbar. So ist es nicht oder nur durch eine überdimensionierte Grafik möglich, bei allen Auflösungen die volle Fensterbreite mit nur einer Instanz der Grafik auszufüllen.
Browserunterstützung
Die Eigenschaft background-image
wird von allen modernen Browsern unterstützt mit folgender
Einschränkung:
- Internet Explorer 6 und 7
- IE ignoriert bis Version 7 den Wert
inherit
. Zudem positionieren beide Browser das Hintergrundbild nur dann korrekt, wenn sie »Layout« haben.
Wiederholung eines Hintergrundbilds: Die Eigenschaft background-repeat
Die Eigenschaft background-repeat
bestimmt, ob und in welche Richtung das Hintergrundbild eines
Elements wiederholt werden soll.
Werte | repeat , no-repeat , repeat-x , repeat-y , inherit |
---|---|
Initialwert | repeat |
Vererbung | nein |
Anwendung | global |
Beispiel:
body { color: red; background-color: white; background-image: url(redbox.gif); background-repeat: no-repeat; }
Geben Sie den Wert repeat
an, wird das
Hintergrundbild über die volle Anzeigefläche gekachelt.
Bei repeat-x
wird das Bild nur in
x-Richtung wiederholt, bei repeat-y
entsprechend nur in
y-Richtung. Geben Sie no-repeat
an, wird das
Hintergrundbild nicht wiederholt, sondern nur ein Mal
eingefügt. An welcher Stelle genau das Bild eingefügt
wird, bestimmen Sie über die Eigenschaft background-position
.
Abb. 7.2: Die Eigenschaft background-repeat
Browserunterstützung
Die Eigenschaft background-repeat
wird von allen modernen Browsern unterstützt mit folgender
Einschränkung:
- Internet Explorer 6 und 7
- Bis Version 7 interpretiert der IE den Wert
inherit
wierepeat
.
Scrolleigenschaft eines Hintergrundbilds: Die Eigenschaft background-attachment
Die Eigenschaft background-attachment
gibt an, ob ein Hintergrundbild mit der Seite mitrollen oder auf
der Stelle stehen bleiben soll.
Werte | scroll , fixed , inherit |
---|---|
Initialwert | scroll |
Vererbung | nein |
Anwendung | global |
Beispiel:
body { color: red; background-color: white; background-image: url(redbox.gif); background-repeat: no-repeat; background-attachment: scroll; }
Der Wert scroll
sorgt dafür, dass das
Hintergrundbild mit der Seite mitscrollt. Geben Sie fixed
an, bleibt es
beim Scrollen der Seite auf der Stelle stehen. Dieses Verhalten
ist auch als »Wasserzeicheneffekt« bekannt. Dabei
werden fixierte Hintergrundbilder stets am Browserfenster
ausgerichtet und nicht am Element, für das diese Eigenschaft
deklariert ist. So ist es möglich, dass eine fixierte
Hintergrundgrafik scheinbar nicht angezeigt wird (oder erst beim
Scrollen), weil sie sich außerhalb der Anzeigefläche
des Elements befindet. Abhilfe schafft hierbei eine Wiederholung
des Bilds mit background-repeat
.
Browserunterstützung
Die Eigenschaft background-attachment
wird von
allen modernen Browsern unterstützt mit folgenden
Einschränkungen:
- Internet Explorer 6
- IE bis Version 6 interpretiert den Wert
fixed
nur am Elementbody
korrekt. Ferner ignoriert er den Wertinherit
. - Internet Explorer 7
- IE 7 erkennt den Wert
fixed
korrekt, ignoriert aber den Wertinherit
.
Position eines Hintergrundbilds: Die Eigenschaft background-position
Die Eigenschaft background-position
bestimmt die Position eines Hintergrundbilds.
Werte | <Prozent> oder <Prozent> <Prozent>, <Länge> oder <Länge> <Länge>, top , center oder bottom zusammen mit left , center oder right , inherit |
---|---|
Initialwert | 0% 0% |
Vererbung | nein |
Anwendung | Blockelemente |
Es gibt verschiedene Möglichkeiten, die Position eines Hintergrundbilds zu bestimmen.
Erste Möglichkeit: Prozentwerte
(<Prozent>
oder <Prozent> <Prozent>
)
Notieren Sie zwei Werte, definiert der erste
den horizontalen und der zweite den vertikalen Abstand, jeweils
gemessen von der oberen linken Ecke des Elements; geben Sie nur
einen Wert an, wird lediglich die horizontale Position bestimmt,
die vertikale entspricht dem Wert 50%
.
Die so positionierte Hintergrundgrafik wird
jedoch nicht mit ihrer oberen linken Ecke an diesem Punkt
platziert, sondern entsprechend den angegebenen Werten nach oben
links verschoben. So liegt ein mit der Deklaration background-position: 100% 100%;
nach unten rechts
positioniertes Bild nicht außerhalb der Anzeigefläche,
sondern genau in der unteren rechten Ecke, da die Grafik selbst
um ihre vollen Ausmaße verschoben wird. Abbildung 7.92
illustriert dieses Verhalten anhand der Deklaration background-position: 30% 60%;
. Die Linien kreuzen sich genau
an dieser Koordinate. Sie sehen, wie das Bild nach oben links
verschoben wird.
Abb. 7.3: Positionierung eines Hintergrundbilds
Zweite Möglichkeit: Angabe von
Längen (<Länge>
oder
<Länge> <Länge>
)
Die Positionierung mit Längen funktioniert so wie die Positionierung mit Prozentwerten, allerdings wird die Grafik nicht um ihre Ausmaße verschoben. Im folgenden Beispiel wird das Hintergrundbild 100 Pixel in x-Richtung (nach rechts) und 200 Pixel in y-Richtung (nach unten) ausgerichtet.
Beispiel:
body { color: red; background-color: white; background-image: url(redbox.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: 100px 200px; }
Dritte Möglichkeit: Schlüsselwörter (top
, center
oder
bottom
zusammen mit left
, center
oder
right
)
Die Werte top
und left
entsprechen
der vertikalen beziehungsweise horizontalen Position 0%
. center
entspricht
in beiden Richtungen 50%
. right
und
bottom
entsprechen horizontal
beziehungsweise vertikal 100%
.
Ein Bild, das zum Beispiel in der rechten
unteren Ecke des Fensters platziert werden soll, entspricht
entweder 100% 100%
, bottom right
oder
right bottom
.
Schlüsselwörter dürfen mit
Prozent- oder Längenangaben gemischt werden, wobei
left
und right
in solchen
Kombinationen nur als erster Wert und top
und
bottom
nur als zweiter Wert
notiert werden dürfen.
Browserunterstützung
Die Eigenschaft background-position
wird von allen modernen Browsern unterstützt mit einer
Ausnahme:
- Internet Explorer 6 und 7
- IE behandelt den Wert
inherit
bis Version 7 wie die Angabetop left
.
Hintergrund: Die zusammenfassende Eigenschaft background
Die Eigenschaft background
fasst die
Einstellung der einzelnen Hintergrundeigenschaften (background-color
,
background-image
, background-repeat
,
background-attachment
und
background-position
) zusammen. Sie
setzt zunächst die einzelnen Hintergrundeigenschaften auf
ihre Initialwerte und weist ihnen dann die explizit in der
Deklaration angegebenen Werte zu.
Das Beispiel können Sie wie folgt abkürzen:
body { color: red; background: white url(redbox.gif) no-repeat scroll 100px 200px; }
Browserunterstützung
- Alle Browser
- Die Eigenschaft
background
wird von allen modernen Browsern unterstützt, allerdings gibt es einige Einschränkungen, die bei den einzelnenbackground-*
-Eigenschaften aufgeführt sind.