Hintergrundbilder

Eine HTML-Seite mit Hintergrund erstellen

Ihr könnt für eine HTML-Seite auch ein Hintergrundbild festlegen, daß sich über das ganze Anzeigefenster wiederholt, so daß ein Kacheleffekt entsteht. Das Hintergrundbild sollte natürlich eine kleine Dateigröße haben.

Hier 3 typische Hintergrundbilder

  • Speichere die oberen 3 GIF-Grafiken (Lizzy-Girls, Lizzy-Gardine und blaues Muster) in den Ordner *Bilder*. Einfach mit einem Rechtsklick auf das Bild klicken, auf "Bild speichern unter... " gehen und dann abspeichern (Beim Mac: Control-Taste und Mausklick auf das Bild). Benenne das erste Bild *muster1.gif*, das zweite *muster2.gif* und das dritte *muster3.gif*.
  • Erstelle eine HTML-Datei mit folgendem Quellcode:

<html>
<head>
<title>Die f&uuml;nfte Lektion</title>
</head>

<body bgcolor="#FFFFFF" text="#330066" background="bilder/muster1.gif">
<h1>Hallo!</h1>
<p>Hier wurde ein Hintergrundbild eingebunden. Das kleine Bild wird automatisch
  wiederholt. Ich glaube mir wird schwindelig ...</p>
</body>
</html>~

  • Benenne die Datei *lektion53.htm*
  • Öffne die Datei *lektion53.htm* im Browser
  • So wird es wohl aussehen:

  • background="bilder/muster1.gif"~
    Im Body gibt es ein neues Attribut: background (englisch Hintergrund). hier kannst du einfach den Pfad zum Bild angeben, und schon wird dieses Bild als Hintergrundbild verwendet.
  • Du siehst, das Hintergrundbild wiederholt sich. Nun kannst du auch mit den anderen 2 Bildern mal einen Kacheleffekt erzeugen. Aber vorsicht! Die Hintergrundmuster sollten nicht zu wild sein, sonst kannst du ja nix mehr lesen.

Die fünfte Lektion ist nun vorbei. Mit welchem Programm du nun deine Bilder erstellst, ist dir überlassen. Das Thema Bildbearbeitung würde den Rahmen dieses Kurses sprengen. Ich hoffe Du machst weiter mit der nächsten Lektion wenn es heißt: