Cascading Stylesheets Stil mit <Stil>

CSS2-Referenz | HTML-4.01-Referenz | Farben, Zeichen und Maße | Workshop | Externe Links | Impressum | Hinweise

# Color und background – Vordergrundfarbe und Hintergrundgestaltung

Eigenschaften, die die Farbe des Vordergrundes und die Darstellung des Hintergrundes eines Elements steuern, also die Farbe des Textes in Absätzen und Tabellenzellen sowie Hintergrundbild oder Hintergrundfarbe, die Position des Hintergrundbildes und die Art seiner Wiederholung.

background legt nicht nur die Hintergrundfarbe oder ein Hintergrundbild für das gesamte Dokument fest, sondern alle Blockelemente können ebenfalls einen Hintergrund enthalten.

Die Position von Hintergrundbildern kann festgelegt werden, und zwar absolut oder relativ in Hinsicht auf das Browserfenster. Ebenfalls festgelegt werden kann die Anzahl der Wiederholungen des Musters in y- oder x-Richtung und ob das Hintergrundbild fest stehen soll oder mitscrollt, wenn das Dokument gescrollt wird. Eine Eigenschaft ist für den Vordergrund und sechs Eigenschaften sind insgesamt für die Darstellung des Hintergrundes spezifiziert:

color • background • background-attachment • background-color • background-image • background-position • background-repeat

## color

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Ja | color bestimmt die Farbe des Textes. Die Vorgabe ist Schwarz. | color

color gibt die Farbe eines Elements als Schlüsselwort (red), als sechsstellige Hexadezimalzahl (#FFFFFF) oder als Tripel von drei RGB-Werten (255,255,255) an. Es gibt 16 Standardfarben in HTML:

aqua #00FFFF rgb(0,255,255) | gray #808080 rgb(128,128,128) | silver #C0C0C0 rgb(192,192,192) | navy #000080 rgb(0,0,128)
black #000000 rgb(0,0,0) | green #800000 rgb(128,0,0) | teal #008080 rgb(0,128,128) | olive #808000 rgb(128,128,0)
blue #0000FF rgb(0,0,255) | lime #00FF00 rgb(0,255,0) | white #FFFFFF rgb(255,255,255) | purple #800080 rgb(128,0,128)
fuchsia #FF00FF rgb(255,0,255) | maroon #800000 rgb(128,0,0) | yellow #FFFF00 rgb(255,255,0) | red #FF0000 rgb(255,0,0)

#### Beispiel

    .gruen { color: green; font-size: 14px; font-weight: bold}
    .teal { color: rgb(0,128,128); font-size: 14px; font-weight: bold}
    .olive { color: #808000; font-size: 14px; font-weight: bold}

↑

## background

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein | background fasst alle fünf individuellen Stylesheet-Eigenschaften des Hintergrundes zusammen. | background-color &| background-image &| background-repeat &| background-attachment &| background-position

Beispiel

    body {        background: oldlace url(bilder/loewe-mt.jpg)
                  no-repeat fixed 50px 50px}
    div.fliess {  background: url(bilder/loewe.jpg)
                  no-repeat fixed 50px 50px; border: 1px solid gray;}

#### Bemerkung

Opera 5+ unterstützt die Positionierung von Hintergrundbildern in anderen Elementen als dem body-Element nicht korrekt.

↑

## background-attachment

IE4+ M1 N6 O5+ Version: CSS1 Erblich: Nein | background-attachment entscheidet, ob der Hintergrund fest ist oder scrollt. | scroll | fixed

scroll ist die Voreinstellung und lässt das Hintergrundbild zusammen mit dem Text und den Bildern scrollen, wenn das Browserfenster abwärts oder aufwärts, nach rechts oder links gescrollt wird.

fixed lässt den Hintergrund fest an seinem Platz im Browserfenster. Text und Bilder bewegen sich über dem Hintergrund, wenn das Browserfenster abwärts oder aufwärts, nach rechts oder links gescrollt wird.

Beispiel

    body { background-image: url(bilder/loewe-mt.jpg);
    background-attachment: fixed; }

↑

## background-color

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein | background-color legt die Hintergrundfarbe eines Elementes fest. Da Hintergrundfarben einzelnen Elementen zugewiesen werden könnnen, kann es mehr als eine Hintergrundfarbe in einem Dokument geben. | transparent | color

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

color ist entweder das Schlüsselwort für eine Farbe (red), die sechsstellige Hexadezimalzahl (#FFFFFF) oder ein Tripel aus drei RGB-Werten (255,255,255). Es gibt 16 Standardfarben in HTML:

aqua #00FFFF rgb(0,255,255) | gray #808080 rgb(128,128,128) | silver #C0C0C0 rgb(192,192,192) | navy #000080 rgb(0,0,128)
black #000000 rgb(0,0,0) | green #800000 rgb(128,0,0) | teal #008080 rgb(0,128,128) | olive #808000 rgb(128,128,0)
blue #0000FF rgb(0,0,255) | lime #00FF00 rgb(0,255,0) | white #FFFFFF rgb(255,255,255) | purple #800080 rgb(128,0,128)
fuchsia #FF00FF rgb(255,0,255) | maroon #800000 rgb(128,0,0) | yellow #FFFF00 rgb(255,255,0) | red #FF0000 rgb(255,0,0)

Beispiel

    body          { background-color: oldlace; }
    div.fliess    { background-color: ivory; }
    div.fliess h1 { background-color: coral; }

↑

## background-image

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein | background-image legt ein Bild als Hintergrund fest. | url ("urladdress") | none

url ("urladdress") ist der Name eines Bildes mit seinem vollen Pfad.

none ist der Vorgabewert – per Vorgabe ist kein Hintergrundbild vorgesehen. Die explizite Notation von none sorgt dafür, dass alle vorangegangenen Deklarationen eines Hintergrundbildes ausgeschaltet werden.

Beispiel

    body          { background-image: url(loewe.gif) }
    div.fliess    { background-image: url(bg_hell.gif) }
    div.fliess h1 { background-image: url(bg.gif); padding: 5px 4px }

↑

## background-position

IE4+ N6 M1 O5+ Version: CSS1 Erblich: Nein | background-position legt die anfängliche Position des Hintergrundbildes fest. | [ percentage | length ] {1,2} | [ [ top | center | bottom ] &| [ left | center | right ] ]

percentage Prozentangaben werden üblicherweise als Wertepaar notiert, in dem die beiden Werte durch ein Leerzeichen getrennt sind. Die erste Prozentangabe bezieht sich auf die horizontale Achse und die zweite auf die vertikale Achse. 0% 0% (Voreinstellung) ist als obere linke Ecke und 100% 100% als rechte untere Ecke definiert. Wenn Sie nur einen Wert angeben, bezieht er sich automatisch auf die horizontale Achse und die vertikale Achse wird auf 50% eingestellt.

Sie können jede Kombination aus Prozentangaben und Längen einsetzen. Alternativ können Sie eines der Schlüsselwörter [top, center, bottom] und/oder [left, right, center] als Positionsangabe notieren. Sie können Schlüsselwörter nicht mit Prozentangaben und Längenangaben mischen.

Weitere Beispiele für Prozentangaben:

    %-Paar Position
    0% 50% left center
    50% 0% center top
    50% 50% center
    0% 100% left  bottom corner
    100% 0% right top corner
    50% 100% center bottom
    100% 50% right center

↑

## background-repeat

IE4+ N4+ M1 O5+ Version: CSS1 Erblich: Nein | background-repeat wiederholt das Hintergrundbild entlang der vertikalen und/oder horizontalen Achse. Die Wiederholung des Bildes wird auch als "Kacheln" oder "tiling" bezeichnet. | repeat | repeat-x | repeat-y | no-repeat

repeat wiederholt das Hintergrundbild sowohl in horizontaler als auch in vertikaler Richtung (Voreinstellung).

repeat-x wiederholt das Hintergrundbild in horizontaler Richtung (entlang der X-Achse).

repeat-y wiederholt das Hintergrundbild in vertikaler Richtung (entlang der Y-Achse).

no-repeat ist die Vorgabe – das Bild wird nicht gekachelt. Die Angabe von no-repeat kann dazu dienen, alle vorangegangenen Deklarationen auszuschalten.

Beispiel

    body       { background-image: url(logo.gif);
                 background-repeat: repeat-x}
    div.fliess { background-image: url(flach.gif);
                 background-repeat: repeat-y }

↑

aural Stile für die Sprachausgabe

border Stile für die Gestaltung eines Rahmens um ein Element

color und background Stile für die Vordergrundfarbe und Hintergrundgestaltung

content Stile für automatisch generierten Inhalt

dimension Stile für die Abmessungen und Ausrichtung von Elementen

font Stile für die Schriftgestaltung

lists and markers Stile für Aufzählungen und Listen

margin Stile für den Abstand eines Elements gegen umgebende Elemente

padding Stile für den inneren Abstand zum Element

paged media Stile für den Druck

positioning Stile für die Positionierung

Pseudoklassen und Pseudoelemente Stile für die Gestaltung von Pseudolinks und Pseudoelementen

table Stile für die Gestaltung von Tabellen

text Stile für die Absatzgestaltung

user interface Stile für die Gestaltung der Benutzeroberfläche durch Rahmen und Mauszeiger

Cascading Styleheets – Stil mit <Stil> • Das Begleitmaterial zum Buch
© media engineering Ulrike Häßler 2002 • Frechen