Startseite
CSS-Stylesheet Farben  
xgdown Einleitung
xgdown Schriftfarbe
xgdown Hintergründe
       xgdown  background-color:  (Hintergrundfarbe)
       xgdown  background-image:url( )  (Hintergrundgrafik)
       xgdown  background-repead:  (Hintergrundwiederholung)
       xgdown  background-position:  (Hintergrund positionieren)
       xgdown  background-attachement:  (Hintergrund festsetzen)
       xgdown  background:  (Hintergrund allgemein)
xgnext Aufgaben

Feedback     Interesse an einer CD ?    

Einleitung

Auf die folgenden Stylesheet-Eigenschaften wird näher eingegangen:

  • color: Textfarbe
  • background-color: Hintergrundfarbe
  • background-image: Hintergrundbild
  • background-repead: Hintergrundwiederholung
  • background-attachment: Hintergrund festsetzen
  • background-position: Hintergrund positionieren
  • background: Hintergrundeigenschaften

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.
Blockelemente sind aber auch 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 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 Hintergrundfarbe der HTML-Datei oder zu einer dateiweiten Hintergrundgrafik ab. Sehr schöne Effekte können Sie erzielen, indem Sie Angaben zu Hintergrundfarben bzw. Hintergrundbildern einzelner Elemente mit Angaben zu Rahmen und Innenabstand kombinieren.

Schriftfarbe

Mit color: können Sie Textvordergrundfarbe bzw. Schriftfarbe bestimmen.

color: Mit color: können Sie die Textfarbe für ein Element bestimmen. Erlaubt sind Farbangaben.
Diese Eigenschaft kann jedem beliebigen Element zugewiesen werden, sodass ganze Dokumente, Absätze oder auch nur einzelne Zeichen, Wörter oder Ausdrücke in einer bestimmten Farbe erscheinen.

Beispiel:
<p><span style="color:maroon">kleiner Beispieltext mit Farbe <b>maroon</b></span><br>
<span style="color:blue;font-size:230%">großer Beispieltext
mit Farbe <b>blue</b></span></p>

kleiner Beispieltext mit Farbe maroon
großer Beispieltext mit Farbe blue

Hintergründe

Hintergrundfarbe

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

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

Beispiel:
<h3>Hintergründig!</h3>
<p style="background-color:#FFDDDD; padding:6px;">
Hinter dem Internet ist das
<span style="background-color:#FFFF66;">Hinternet</span>.</p>
<p>Dies hat nichts zu sagen.</p>
<p style="background-color:#FFFF66; padding:6px;">Im Kinderzimmer herrscht das
<span style="background-color:#FFDDDD;">Kindernet</span>.</p>

Hintergründig!

Hinter dem Internet ist das Hinternet.

Dies hat nichts zu sagen.

Im Kinderzimmer herrscht das Kindernet.

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

Hintergrundgrafik

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

background-image:url( ) Mit background-image:url( ): 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.

Beispiel:
<div style="background-image:url(img/back4.jpg); margin:0px; padding:10px">
<h3 align="center" style="color:#00FFFF">Willkommen im Reich der Texturen!</h3>
<div style="background-image:url(img/back1.jpg); margin:30px; padding:10px">
<h4 align="center" style="color:#FFFF00">Willkommen im Reich der Texturen!</h4>
</div>
<p>&nbsp;</p>
</div>

Willkommen im Reich der Texturen!

Willkommen im Reich der Texturen!

 

Hintergrundwiederholung

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

background-repead: Mit background-repeat: können Sie das Wiederholungsverhalten einer Hintergrundgrafik, die Sie mit background-image einbinden, kontrollieren. Erlaubt ist eine der folgenden Angaben.
repead = vertikale und horizontale Wiederholung (Standard)
repead-x = horizontale Wiederholung (x-Achse)
repead-y = vertikale Wiederholung (y-Achse)
no-repead = keine Wiederholung, die Grafik wird als einzelnes Bild dargestellt.

Beispiel:
<div style="background-image:url(img/orangew1.gif);
background-repeat:repeat; margin:30px; border:thin solid #CCCCFF">
<p>Der erste Bereich: <br>background-image:url(img/orangew1.gif);
<span style="color:blue">background-repeat:repeat</span>; margin:30px; border:thin solid #CCCCFF</p>
</div>

Der erste Bereich:
background-image:url(img/orangew1.gif); background-repeat:repeat; margin:30px; border:thin solid #CCCCFF

 
<div style="background-image:url(img/orangew1.gif);
background-repeat:repeat-x; margin:30px; border:thin solid #CCCCFF">
<p>Der zweite Bereich: <br>background-image:url(img/orangew1.gif);
<span style="color:blue">background-repeat:repeat-x</span>; margin:30px; border:thin solid #CCCCFF</p>
</div>

Der zweite Bereich:
background-image:url(img/orangew1.gif); background-repeat:repeat-x; margin:30px; border:thin solid #CCCCFF

 
<div style="background-image:url(img/orangew1.gif);
background-repeat:repeat-y; margin:30px; border:thin solid #CCCCFF">
<p>Der dritte Bereich: <br>background-image:url(img/orangew1.gif);
<span style="color:blue">background-repeat:repeat-y</span>; margin:30px; border:thin solid #CCCCFF</p>
</div>

Der dritte Bereich:
background-image:url(img/orangew1.gif); background-repeat:repeat-y; margin:30px; border:thin solid #CCCCFF

 
<div style="background-image:url(img/orangew1.gif);
background-repeat:no-repeat; margin:30px; border:thin solid #CCCCFF">
<p>Der vierte Bereich: <br>background-image:url(img/orangew1.gif);
<span style="color:blue">background-repeat:no-repeat</span>; margin:30px; border:thin solid #CCCCFF</p>
</div>

Der vierte Bereich:
background-image:url(img/orangew1.gif); background-repeat:no-repead; margin:30px; border:thin solid #CCCCFF

Hintergrund positionieren

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.

background-position: 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 numerische Angaben und folgende Angaben:
top = vertikal obenbündig.
center = horizontal zentriert.
middle = vertikal mittig.
bottom = vertikal untenbündig.
left = horizontal linksbündig.
right = horizontal rechtsbündig.

Beispiel:
<div style="background-image:url(img/orangew1.gif);
background-repeat:no-repeat; background-position:50pt 14pt;
margin:30px; border:thin solid #CCCCFF">
<p>background-image:url(img/orangew1.gif);
<span style="color:blue">background-repeat:no-repeat; background-position:50pt 14pt</span>;
margin:30px; border:thin solid #CCCCFF</p>
</div>

background-image:url(img/orangew1.gif); background-repeat:no-repeat; background-position:50pt 14pt; margin:30px; border:thin solid #CCCCFF

 
<div style="background-image:url(img/orangew1.gif);
background-repeat:repeat-x; background-position:50pt 14pt;
margin:30px; border:thin solid #CCCCFF">
<p>background-image:url(img/orangew1.gif);
<span style="color:blue">background-repeat:repeat-x; background-position:50pt 14pt</span>;
margin:30px; border:thin solid #CCCCFF</p>
</div>

background-image:url(img/orangew1.gif); background-repeat:repeat-x; background-position:50pt 14pt; margin:30px; border:thin solid #CCCCFF

 
<div style="background-image:url(img/orangew1.gif);
background-repeat:repeat-y; background-position:50pt 14pt;
margin:30px; border:thin solid #CCCCFF">
<p>background-image:url(img/orangew1.gif);
<span style="color:blue">background-repeat:repeat-y; background-position:50pt 14pt</span>;
margin:30px; border:thin solid #CCCCFF</p>
</div>

background-image:url(img/orangew1.gif); background-repeat:repeat-y; background-position:50pt 14pt; margin:30px; border:thin solid #CCCCFF

 
<div style="background-image:url(img/orangew1.gif);
background-repeat:repeat; background-position:50pt 14pt;
margin:30px; border:thin solid #CCCCFF">
<p>background-image:url(img/orangew1.gif);
<span style="color:blue">background-repeat:repeat; background-position:50pt 14pt</span>;
margin:30px; border:thin solid #CCCCFF</p>
</div>

background-image:url(img/orangew1.gif); background-repeat:repeat; background-position:50pt 14pt; margin:30px; border:thin solid #CCCCFF

Hintergrund festsetzen

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

Zur Erinnerung:

<body background="bilder/snow.jpg" bgproperties="fixed">

background-attachment: 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.

Beispiel:

<html>
<head>
<title>background-attachment</title>
<style type="text/css">
body
{
 background-image:url(img/dino1.gif); background-repeat:no-repeat;
 background-attachment:fixed; padding:0px;
 }
</style>
</head>

<body>

<div style=" margin-left:130px; margin-top:20px; margin-right:20px; margin-bottom:20px">
<h2>Bitte scrollen!</h2>
<h3>
viel Text<br>viel Text <br>zum Scrollen!<br>xxxxxxxxxx<br>xxxxxxx<br>
viel Text<br>viel Text <br>zum Scrollen!<br>xxxxxxxxxx<br>xxxxxxx<br>
viel Text<br>viel Text <br>zum Scrollen!<br>xxxxxxxxxx<br>xxxxxxx<br>
viel Text<br>viel Text <br>zum Scrollen!<br>xxxxxxxxxx<br>xxxxxxx<br>
viel Text<br>viel Text <br>zum Scrollen!<br>xxxxxxxxxx<br>xxxxxxx<br>
viel Text<br>viel Text <br>zum Scrollen!<br>xxxxxxxxxx<br>xxxxxxx<br>
viel Text<br>viel Text <br>zum Scrollen!<br>xxxxxxxxxx<br>xxxxxxx<br>
viel Text<br>viel Text <br>zum Scrollen!<br>xxxxxxxxxx<br>xxxxxxx<br>
viel Text<br>viel Text <br>zum Scrollen!<br>xxxxxxxxxx<br>xxxxxxx<br>
</h3>
</div>

</body>
</html>
So sieht das aus:

Hintergrund allgemein

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:

  • background-image: (Hintergrundbild)
  • background-repead: (Hintergrundwiederholung)
  • background-attachement: (Hintergrund festsetzen)
  • background-position: (Hintergrund positionieren)

background: 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.

Beispiel:
<div style="background:url(img/orangew1.gif) repeat-y 50pt 14pt;
margin:30px; border:thin solid #CCCCFF">
<p><span style="color:blue">
background:url(img/orangew1.gif) repeat-y 50pt 14pt</span>; margin:30px; border:thin solid #CCCCFF</p>
</div>

background:url(img/orangew1.gif) repeat-y 50pt 14pt; margin:30px; border:thin solid #CCCCFF