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.

Beispiel:

p.warnung {
  color: red;
  background-color: white;
}

Zum Seitenanfang

Hintergrundfarbe: Die Eigenschaft background-color

Die Eigenschaft background-color bestimmt die Hintergrundfarbe eines Elements.

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.

Zum Seitenanfang

Hintergrundbild: Die Eigenschaft background-image

Die Eigenschaft background-image gibt das Hintergrundbild eines Elements an.

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.

Zum Seitenanfang

Wiederholung eines Hintergrundbilds: Die Eigenschaft background-repeat

Die Eigenschaft background-repeat bestimmt, ob und in welche Richtung das Hintergrundbild eines Elements wiederholt werden soll.

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

Zum Seitenanfang

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.

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.

Zum Seitenanfang

Position eines Hintergrundbilds: Die Eigenschaft background-position

Die Eigenschaft background-position bestimmt die Position eines Hintergrundbilds.

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.

Zum Seitenanfang

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