Stil mit {stil}

Sep 2008

CSS background und color • Hintergrundbilder und Farben für Schrift und Rahmen

Die CSS-Kurzschrift background fasst alle Stylesheet-Eigenschaften des Hintergrunds zusammen:

background-color, background-image, background-repeat, background-attachment und background-position.

Die Eigenschaft background legt nicht nur die Hintergrundfarbe oder das Hintergrundbild für das gesamte Dokument fest, sondern kann für nahezu alle HTML-Elemente angegeben werden.

Die Regeln für den Hintergrund von Webseiten und Element werden von allen modernen Browern unterstützt und sind nicht erblich.

---

body { background: 
       blue url(mix.png) bottom right no-repeat fixed; }
         ^        ^        ^      ^       ^       ^
         |        |        |      |       |       +- background-attachment
         |        |        |      |       |
         |        |        |      |       +- background-repeat
         |        |        |      |
         |        |        |      +- background-position
         |        |        |
         |        |        +- background-position
         |        |
         |        +- background-image
         | 
         +- background-color   

background-color

Die CSS-Eigenschaft background-color legt die Hintergrundfarbe eines Elements fest. Da Hintergrundfarben einzelnen Elementen zugewiesen werden könnnen, kann es mehr als eine Hintergrundfarbe in einem Dokument geben und Elemente mit einer Hintergrundfarbe können über Elementen mit anderen Hintergrundfarben liegen.

Dabei überdeckt die Hintergrundfarbe eines Elements mit einem höheren z-index bei absolut positionierten Elementen die darunter liegenden Elemente.

IE4+ M1 N4+ O5+ CSS1 Erblich: Nein

background-color

Hintergrundfarbe eines Elements.

Werte

transparent | <color> | none

transparent (Voreinstellung)

lässt die Hintergrundfarbe durch die Vordergrundfarbe von Bildern sichtbar erscheinen, ebenso Bereiche innerhalb eines Buchstabens wie der Weißraum im "O".

<color>

ist entweder das Schlüsselwort für eine Farbe (red), die sechsstellige Hexadezimalzahl (#FFFFFF) oder ein Tripel aus RGB-Werten (255,255,255) oder HSV-Werten (60,25,50), wobei aber nur RGB-Werte von allen Browsern unterstützt werden. Mehr über die CSS-Regeln für color …

none

löscht zuvor vereinbarte Hintergrundbilder oder -farben.

background-image

url(mix.png) ist die Adresse eines Hintergrundbildes. Die URL des Hintergrundbildes ist der Pfad zum Ordner, in dem das Bild liegt. Der Pfad muss relativ zur Webseite angegeben werden. Liegt das Hintergrundbild z.B. in einem Ordner bilder unterhalb der aufrufenden Seite, wird url(bilder/mix.png) angegeben.

background-position

background-position legt die Position eines Hintergrundbilds absolut oder relativ in Hinsicht auf das Browserfenster fest.

Die anfängliche Position eines Hintergrundbilds background-position kann als Prozent- oder Längenangabe (z.B. in Pixel) auf der horizontalen und vertikalen Achse oder durch Schlüsselwörter (z.B. »bottom right«) angegeben werden.

body { background: url(champ.gif) center top; }

---

Jede Kombination aus Prozentangaben und Längen ist möglich. Alternativ kann eines der Schlüsselwörter [top, center, bottom] und/oder [left, right, center] als Position notiert werden. Negative Längenangaben sind erlaubt und Schlüsselwörter dürfen seit CSS 2.1 mit Prozentangaben und Längenangaben gemischt werden (z.B. "center 10%").

background-repeat

Per Voreinstellung werden Hintergrundbild über die gesamte Fläche des Elements wagerecht und senkrecht wiederholt.

Die CSS-Eigenschaft background-repeat legt fest, ob und in welche Richtung das Hintergundbild wiederholt werden soll: horizontal oder vertikal oder über die gesamte Fläche des HTML-Elements.

body { background: url(citrus.gif) 0 10% repeat-x; }

background-attachment

Ohne weitere Angaben scrollen Hintergrundbilder, wenn der Benutzer die Seite scrollt. Die CSS-Eigenschaft background-attachment fixiert das Hintergrundbild an einer festen Position im Browserfenster.

body { background: url(background.jpg) fixed; }

IE4+ M1 N6 O5+ S1 CSS1 Erblich: Nein

scroll (Voreinstellung)

lässt das Hintergrundbild zusammen mit Text und Bildern scrollen.

fixed

hält das Hintergrundbild fest.

Mehrere Hintergrundbilder

In CSS2.1 kann jedem Element nur ein Hintergrundbild zugewiesen werden. Es gibt keine Möglichkeit, das Hintergrundbild zu skalieren. Mehrere Hintergrundbilder für ein Element gibt es erst mit CSS3.