Der body-Tag

Bislang haben wir nur Webseiten erstellt, die lediglich einen weißen Hintergrund besaßen. Gehen wir nun einen Schritt weiter und fügen wir Hintergrundfarben und Hintergrundbilder hinzu.

Hintergrundfarben

Um eine Homepage mit einem einzigen Farbton zu füllen, wird das Attribut bgcolor im body-Tag verwendet. Bei folgendem Code wird die gesamte Homepage mit schwarzem Hintergrund erscheinen. Schriften sollten farblich so angepasst werden, dass sie sichtbar sind. (z.B. weiße Schrift auf schwarzem Hintergrund)

<body bgcolor="black">
<p color="#ffffff">Ein weißer Text auf schwarzem Hintergrund</p></body>

Sehen wir uns den Code etwas genauer an:

<body bgcolor="black"><!-- ... --></body>

Hier steht bgcolor=„black“, was bedeutet, dass der Hintergrund des body-Elementes mit schwarzer Farbe gefüllt wird. Dieses Attribut ist ebenso auf andere Tags anwendbar, zum Beispiel auf table oder div.

<p color="#ffffff">Ein weißer Text auf schwarzem Hintergrund</p>

Dieser Text wird weiß angezeigt, wäre also auf weißem Hintergrund unsichtbar, es sei denn der Nutzer markiert den Text. Weiteres über Farben wird im nächsten Kapitel erklärt.

Man sollte deshalb immer darauf achten, dass nie die gleichen Farben für Text und Hintergrundfarbe verwendet wird.

Hintergrundbild

Wenn Sie den Hintergrund nicht mit einer einfachen Farbe, sondern mit einem Hintergrundbild füllen möchten, gibt es mehrere Möglichkeiten. Will man den Hintergrund links oben haben, sieht der Code folgendermaßen aus:

<body background="URL ZUM BILD"><!-- .. --></body>

Es gibt allerdings noch weitere Möglichkeiten ein Hintergrundbild einzufügen und auszurichten. Mithilfe von CSS kann bestimmt werden, ob sich das Hintergrundbild in eine Richtung wiederholen soll oder nicht und wie es ausgerichtet sein soll.

Ausdruck	Bedeutung
Wiederholungen (background-repeat)
no-repeat	Keine Wiederholungen
repeat	In alle Richtungen (x, y) wiederholen
repeat-x	In x-Richtung wiederholen
repeat-y	In y-Richtung wiederholen
Ausrichtung (background-position)
left	Linksbündig
right	Rechtbündig
center	Mittig
top	Oben
bottom	Unten

Bei background-repeat ist nur ein Wert möglich, bei background-position sind 2 Werte anzugeben. Auch möglich ist dabei die Angabe in Prozent.

<style type="text/css">
body {
    background-image:url(.../bild.jpg);
    background-repeat: no-repeat;
    background-position: right bottom
}
</style>

Mithilfe des Attributs background-attachment ist festlegbar, ob der Hintergrund mitscrollen soll oder nicht (fixed, scroll). Es gibt außerdem die Möglichkeit alle diese Werte in einem Attribut zu namens background zusammenzufassen:

<style type="text/css">
body {
    background: url(bild.jpg) fixed repeat-x left right
}
</style>

Weiteres dazu findet sich im CSS-Tutorial.

Im nächsten Kapitel geht es um die Farben in HTML.

Seitenleiste

Community

Webtutorials

Inhaltsverzeichnis

Der body-Tag

Hintergrundfarben

Hintergrundbild