SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

| ## Style-Sheet-Angaben: Hintergrundfarben und -bilder
| Allgemeines zu Hintergrundfarben und -bildern Hintergrundfarbe (background-color) Hintergrundbild (background-image) Wiederholungs-Effekt (background-repeat) Wasserzeichen-Effekt (background-attachment) Hintergrundposition (background-position) Hintergrund (allgemein) (background)

## Allgemeines zu Hintergrundfarben und -bildern

Sinnvoll sind die hier beschriebenen Angaben vor allem für HTML-Tags, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für `<h[1-6]>`, `<p>`, `<blockquote>`, `<address>` oder `<pre>`. Blockelemente sind aber auch HTML-Tags wie `<center>`, `<div>`, `<table>`, `<tr>`, `<th>` und `<td>`. Auch auf `<body>` lassen sich die hier aufgelisteten Style-Sheet-Angaben anwenden - in diesem Fall beziehen sich die Angaben auf den gesamten sichtbaren Körper der HTML-Datei. Es ist aber auch möglich, einzelne Wörter, z.B. mit Hilfe des <span>-Tags, mit einer eigenen Hintergrundfarbe zu belegen.

Sie können also mit Hilfe von Style-Sheet-Angaben für einzelne Textblöcke und beliebige Textabschnitte separate Hintergrundfarben und Hintergrundbilder definieren, die sich von der definierten Hintergrundfarbe der HTML-Datei oder von dateiweiten Hintergrundbildern abheben. Sehr schöne Effekte können Sie erzielen, indem Sie Angaben zu Hintergrundfarben bzw. Hintergrundbildern einzelner Elemente mit Style-Sheet-Angaben zu Rahmen und Innenabständen kombinieren.

Netscape und der MS Internet Explorer interpretieren die Angaben zu Hintergrundfarben und Hintergrundbild je nach Anwendungsfall mit leichten Unterschieden. In den folgenden Beschreibungen wird auf Besonderheiten hingewiesen.

## Hintergrundfarbe (background-color)

Anzeigebeispiel: So sieht's aus

Sie können für ein HTML-Element eine eigene Hintergrundfarbe definieren.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      h1 { background-color:#003366; }
    </style>

### Erläuterung:

Mit `background-color:` können Sie eine Hintergrundfarbe bestimmen. Erlaubt ist eine Farbangabe.

### Beachten Sie:

Netscape 4.0 bildet bei mehrzeiligen Textabsätzen keinen echten Farbblock, sondern dehnt die Hintergrundfarbe am Zeilenende nur bis zum zufälligen Ende des Textes (siehe erstes der Beispiele). Um dies zu verhindern, können Sie zusätzlich die Angaben `border-style:none; border-width:thin;` notieren. Näheres dazu in den Abschnitten Rahmentyp (border-style) und Rahmendicke (border-width).

Wenn Ihnen bei Textelementen wie etwa Überschriften der Abstand zwischen Textgrenzen und dem Rahmen, der sich durch die Hintergrundfarbe ergibt, zu klein ist, können Sie einen Innenabstand (padding) definieren.

## Hintergrundbild (background-image)

Anzeigebeispiel: So sieht's aus

Sie können für einzelne HTML-Elemente ein eigenes Hintergrundbild definieren.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <p style="background-image:url(back.gif);">Text</p>

### Erläuterung:

Mit `background-image:url([Dateiname]):` können Sie eine Hintergrundgrafik bestimmen. Per Voreinstellung wird die Hintergrundgrafik als Wallpaper (Tapetenmuster) wiederholt, so wie bei der Angabe eines Hintergrundbildes im HTML-Tag `<body>`. Text und referenzierte Grafiken erscheinen über dieser Hintergrundgrafik. Als Grafikdateitypen sollten Sie wie in HTML üblich GIF- oder JPG-Grafiken benutzen.

Im Beispiel wird vorausgesetzt, daß sich die Grafikdatei im gleichen Verzeichnis befindet wie die HTML-Datei. Wenn die Grafik in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim Einbinden von Grafiken in HTML.

### Beachten Sie:

Wenn das Element, für das die Hintergrundgrafik definiert wird, in der Höhe oder Breite kleiner ist als die Hintergrundgrafik, wird die Hintergrundgrafik in der Darstellung an den Grenzen des Elements abgeschnitten.

## Wiederholungs-Effekt (background-repeat)

Anzeigebeispiel: So sieht's aus

Normalerweise wird eine Hintergrundgrafik im Wallpaper-Effekt über den gesamten zur Verfügung stehenden Raum wiederholt. Sie können jedoch ein anderes Verhalten erzwingen.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      body { background-image:url(back.gif); background-repeat:no-repeat; }
    </style>

### Erläuterung:

Mit `background-repeat:` können Sie das Wiederholungsverhalten einer Hintergrundgrafik, die Sie mit `background-image` einbinden, kontrollieren. Erlaubt ist eine der folgenden Angaben.

`repeat` = wiederholen (Voreinstellung).
`repeat-x` = nur "eine Zeile lang" waagerecht wiederholen.
`repeat-y` = nur "eine Spalte lang" senkrecht wiederholen.
`no-repeat` = nicht wiederholen, nur als Einzelbild anzeigen.

### Beachten Sie:

Netscape 4.0 interpretiert diese Angabe zwar, hatte bei Tests aber massive Schwierigkeiten bei der Darstellung von Elementinhalten.

## Wasserzeichen-Effekt (background-attachment)

Anzeigebeispiel: So sieht's aus

Bei längeren Elementen wandert ein Hintergrundbild beim Scrollen im Text optisch mit. Sie können jedoch erzwingen, daß das Hintergrund stehen bleibt (Wasserzeichen-Effekt).

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <div style="background-image:url(back.gif); background-attachment:fixed;">Text</div>

### Erläuterung:

Mit `background-attachment:` können Sie das Scroll-Verhalten einer Hintergrundgrafik, die Sie mit `background-image` einbinden, kontrollieren. Erlaubt ist eine der folgenden Angaben.

`scroll` = mitscrollen (Voreinstellung).
`fixed` = Hintergrundbild bleibt stehen.

### Beachten Sie:

Netscape 4.x interpretiert diese Angabe nicht. Tests zufolge klappt der Wasserzeichen-Effekt auch beim MS Internet Explorer nur, wenn er auf das `<body>`-Tag angewendet wird, nicht in Textabsätzen oder dergleichem.

## Hintergrundposition (background-position)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist vor allem dann interessant, wenn Sie mit einer entsprechenden Angabe zum Wiederholungs-Effekt (background-repeat) erzwingen, daß eine Hintergrundgrafik nur einmal angezeigt wird. Für diesen Fall können Sie mit der Hintergrundposition festlegen, wo genau die Hintergrundgrafik innerhalb des HTML-Elements plaziert werden soll.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      body { background-image:url(back.gif); background-position:1cm 2cm; }
    </style>

### Erläuterung:

Mit `background-position:` können Sie festlegen, wo die linke obere Ecke der Hintergrundgrafik sein soll. Bezugspunkt ist das HTML-Element, für das die Hintergrundgrafik definiert wird. Erlaubt sind entweder zwei numerische Werte, der erste für den Abstand von links und der zweite für den Abstand von oben. Oder eine oder sinnvolle Kombinationen der folgenden Angaben.

`top` = vertikal obenbündig.
`center` = horizontal zentriert.
`middle` = vertikal mittig.
`bottom` = vertikal untenbündig.
`left` = horizontal linksbündig.
`right` = horizontal rechtsbündig.

### Beachten Sie:

Netscape 4.0 interpretiert diese Angabe nicht. Er stellt zwar das Hintergrundbild dar, ignoriert aber die Angaben zu einer erzwungenen Position.

## Hintergrund (allgemein) (background)

Anzeigebeispiel: So sieht's aus

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
Hintergrundbild (background-image)
Wiederholungs-Effekt (background-repeat)
Wasserzeichen-Effekt (background-attachment)
Hintergrundposition (background-position)

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <p style="background:url(back.gif) no-repeat middle center;">Text</p>

### Erläuterung:

Mit `background:` können Sie Angaben für eine Hintergrundgrafik zusammenfassen. Notieren Sie Angaben zum Hintergrundbild, zu Wiederholungs- und Wasserzeicheneffekt sowie zur Position mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal. Es ist nicht erforderlich, zu allen Angaben etwas zu notieren.

### Beachten Sie:

Netscape 4.0 interpretiert die erweiterten Angaben zum Hintergrundbild nicht und hatte beim Testen merkwürdige Darstellungsprobleme.

weiter: | Style-Sheet-Angaben: Listen und Tabellen
zurück: | Style-Sheet-Angaben: Rahmen und Innenabstände

SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

© 1998 Stefan Münz, muenz@csi.com