Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

SELFHTML

Hintergrundfarben und -bilder

Informationsseite

nach unten Allgemeines zu Hintergrundfarben und -bildern
nach unten background-color (Hintergrundfarbe)
nach unten background-image (Hintergrundbild)
nach unten background-repeat (Wiederholungs-Effekt)
nach unten background-attachment (Wasserzeichen-Effekt)
nach unten background-position (Hintergrundposition)
nach unten background (Hintergrund allgemein)

 nach unten 

Allgemeines zu Hintergrundfarben und -bildern

Sinnvoll sind die hier beschriebenen CSS-Eigenschaften vor allem für HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, address oder pre. Block-Elemente sind aber auch div, table, tr, th und td. Auch auf <body> lassen sich die hier aufgelisteten Stylesheet-Angaben anwenden - in diesem Fall beziehen sich die Angaben auf den gesamten sichtbaren Körper der HTML-Datei. Es ist aber ebenso möglich, einzelne Textpassagen, die durch ein Inline-Element wie span, b, strong usw. markiert sind, mit einem eigenen Hintergrund zu belegen.

Elementspezifische Hintergrundangaben heben sich von eventuellen HTML-Angaben zur Seite Hintergrundfarbe der HTML-Datei oder zu einer Seite dateiweiten Hintergrundgrafik ab. Sehr schöne Effekte können Sie erzielen, indem Sie Angaben zu Hintergrundfarben bzw. Hintergrundbildern einzelner Elemente mit Angaben zu Seite Rahmen und Seite Innenabstand kombinieren.

nach obennach unten

CSS 1.0Netscape 4.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 background-color (Hintergrundfarbe)

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-color</title>
<style type="text/css">
body { background-color:#E0E0E0; font-weight:bold; font-family:Arial; font-size:120%; }
.rosabox { background-color:#FFDDDD; padding:6px; margin:0px; }
.rosa { background-color:#FFDDDD; }
.gelbbox { background-color:#FFFF66; padding:6px; margin:0px; }
.gelb { background-color:#FFFF66; }
</style>
</head><body>

<h1>Hintergr&uuml;ndig!</h1>
<p class="rosabox">Hinter dem Internet ist das <span class="gelb">Hinternet</span>.</p>
<p>Dies hat nichts zu sagen.</p>
<p class="gelbbox">Im Kinderzimmer herrscht das <span class="rosa">Kindernet</span>.</p>

</body></html>

Erläuterung:

Mit background-color: können Sie eine Hintergrundfarbe bestimmen. Erlaubt ist eine Seite Farbangabe oder der Default-Wert transparent.

Beachten Sie:

Netscape 4.x bildet bei mehrzeiligen Textabsätzen keinen echten Farbblock, sondern dehnt die Hintergrundfarbe am Zeilenende nur bis zum zufälligen Ende des Textes. Um dies zu verhindern, können Sie zusätzlich die Angaben border:none; und margin:0px; notieren (in den meisten Fällen kommen Sie auch ohne das margin:0px; aus).

Wenn Ihnen der Abstand zwischen Textgrenzen und dem Farbblock, der durch die Hintergrundfarbe entsteht, zu klein ist, können Sie wie im obigen Beispiel mit Seite padding einen Innenabstand definieren.

nach obennach unten

CSS 1.0Netscape 4.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 background-image (Hintergrundbild)

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-image</title>
</head><body style="background-image:url(background1.gif)">

<div style="background-image:url(background2.gif); margin:0px; padding:10px">
<h1 style="text-align:center;color:#FFFFCC">Willkommen im Reich der Texturen!</h1>

<div style="background-image:url(background3.jpg); margin:30px; padding:10px">
<h2 style="text-align:center;color:#804000">Willkommen im Reich der Texturen!</h2>

</div></div>

</body></html>

Erläuterung:

Mit background-image:url([URI]) können Sie eine Hintergrundgrafik bestimmen. Per Voreinstellung wird die Hintergrundgrafik als Wallpaper (Tapetenmuster) wiederholt, so wie bei der Angabe eines Hintergrundbildes im einleitenden 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, dass sich die Grafikdateien im gleichen Verzeichnis befinden 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 Seite Einbinden von Grafiken in HTML. Wenn Sie background-image in einer Seite separaten CSS-Datei notieren, beziehen sich relative Pfadangaben auf das Verzeichnis, in dem diese Stylesheet-Datei liegt.

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.

nach obennach unten

CSS 1.0Netscape 4.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 background-repeat (Wiederholungs-Effekt)

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:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-repeat</title>
</head><body>

<div style="background-image:url(background4.jpg); background-repeat:repeat-x;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der erste Bereich.<br>Ein Text, der sehr leicht<br>umbricht...usw.</p>
</div>
<div style="background-image:url(background4.jpg); background-repeat:repeat-y;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der zweite Bereich.<br>Ein Text, der auch leicht umbricht....usw.</p>
</div>
<div style="background-image:url(background4.jpg); background-repeat:no-repeat;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der dritte Bereich.<br>Ein Text, der auch leicht umbricht...usw.</p>
</div>

</body></html>

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.x interpretiert diese Eigenschaft zwar, hat aber massive Schwierigkeiten bei der Darstellung von Elementinhalten.

nach obennach unten

CSS 1.0Netscape 6.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 background-attachment (Wasserzeichen-Effekt)

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-attachment</title>
<style type="text/css">
div.bgscroll {
  margin:20px 20px 20px 250px; width:35em; border:1px solid red;
  background-image:url(background1.gif); background-repeat:no-repeat; background-position:center center;
  background-attachment:scroll;
}

div.bgfixed {
  margin:20px 20px 20px 250px; border:1px solid red; 
  background-image:url(background5.gif); background-repeat:no-repeat; background-position:center center;
  background-attachment:fixed;
}
</style>
</head><body>

<div class="bgscroll">
  <h1>viel Text <!--usw.--> <code>background-attachment:scroll</code></h1>
</div>

<div class="bgfixed">
  <h1>viel Text <!--usw.--> <code>background-attachment:fixed</code></h1>
</div>

</body></html>	

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), orientiert sich an der Position des jeweiligen Elements
fixed = Hintergrundbild bleibt stehen, orientiert sich am Viewport

Das obige Beispiel demonstriert einen interessanten Anwendungsfall aus der Kombination der Eigenschaften background-attachment und background-position. Beiden div-Elementen werden mittels background-position:center center mittig positionierte Hintergrundgrafiken zugewiesen. Im ersten Fall wird das Bild aufgrund von background-attachment:scroll in der Mitte des Elements selbst dargestellt. Im zweiten Fall jedoch orientiert sich dessen Position aufgrund der Verwendung von background-attachment:fixed am Viewport und wird damit in der Mitte des Browserfensters dargestellt.

Beachten Sie:

Der Internet Explorer bis Version 6 interpretiert diese Eigenschaft nur bezogen auf scrollbare Elemente (dem body-Element oder anderen mit der CSS-Eigenschaft overflow:scroll bzw. overflow:auto).

nach obennach unten

CSS 1.0Netscape 6.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 background-position (Hintergrundposition)

Diese Angabe ist vor allem dann interessant, wenn Sie mit einer entsprechenden Angabe zu background-repeat erzwingen, dass 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 platziert werden soll.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-position</title>
<style type="text/css">
#Tanz {
 background-image:url(background6.gif); background-repeat:no-repeat;
 background-position:30px 20px;
 background-color:white; height:400px;
}
</style>
</head><body>

<div id="Tanz">
<h1>Tanz der Bilder!</h1>
<img src="background_foreground.gif" width="321" height="262"
     alt="Ein transparentes Bild über dem Hintergrundbild">
</div>

</body></html>

Erläuterung:

Mit background-position: können Sie festlegen, wo die linke obere Ecke der Hintergrundgrafik sein soll. Der erste Wert steht für die horizontale, der zweite für die vertikale Position. Bezugspunkt ist das HTML-Element, für das die Hintergrundgrafik definiert wird. Etwaige Seite Innenabstände werden berücksichtigt. Erlaubt sind Seite numerische Angaben und folgende Angaben:

top = vertikal obenbündig.
bottom = vertikal untenbündig.
center = zentriert (horizontal oder vertikal, center center kann als center zusammengefasst werden).
left = horizontal linksbündig.
right = horizontal rechtsbündig.

Im obigen Beispiel enthält das div-Element eine GIF-Grafik mit transparentem Hintergrund. Diese wird im Beispiel über der Hintergrundgrafik angezeigt. Es sieht aus wie eine einzelne Grafik, sind aber zwei verschiedene.

Beachten Sie:

Prozentangaben beziehen sich anders als beispielsweise Pixelwerte nicht auf die linke obere Ecke des Hintergrundbildes. Bei einer Angabe von 40% 60% wird die Stelle der Grafik, die 40 % von deren linkem und 60 % von deren oberem Rand entfernt ist als Bezugspunkt herangezogen. Deklariert man demnach 50% 50%, wird der Punkt, der sich genau in der Mitte der Grafik befindet (also 50 % vom linken und oberen Rand entfernt ist) mittig platziert.

nach obennach unten

CSS 1.0Netscape 4.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 background (Hintergrund allgemein)

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

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background</title>
</head><body>

<div style="background:url(background1.gif) repeat-x;">
<h1 style="font-family:Arial,sans-serif; color:maroon; font-size:80px">NEWS</h1>
<div style="margin-top:45px; font-size:1.2em">
<p>Hier folgen die News...</p>
</div></div>

</body></html>

Erläuterung:

Mit background: können Sie Angaben für den Hintergrund zusammenfassen. Notieren Sie Angaben zur Hintergrundfarbe, zum Hintergrundbild, zu Wiederholungs- und Wasserzeichen-Effekt 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.x interpretiert diese Angabe zwar, aber was er aus dem obigen Beispiel macht, spottet leider jeder Beschreibung.

 nach oben
weiter Seite Listenformatierung
zurück Seite Rahmen
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/css/eigenschaften/hintergrund.htm