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