Warning: Undefined array key "HTTP_REFERER" in /home/www/tipp/websites/tracker_log.php on line 191
Im Webdesign werden häufig kleine Grafiken als Hintergrundbilder eingesetzt. Mit diesen Hintergrundbildern können ganze Webseiten gekachelt werden. Dabei wird das, nur wenige Pixel große Bild, vorzugsweise per css, als background-image im body definiert.
Im separaten Stylesheet oder in der Css-Style-Anweisung im Head der Webseite schreiben Sie:
body {background-image:url(img/hg-aepfel.jpg);}
wenn Sie beispielsweise im Ordner img die Datei hg-aepfel.jpg als Hintergrund kacheln möchten.
Werden keine zusätzlichen Angaben in dieser Style-Angabe gemacht, wird dieses Bild horizontal und vertikal gleichmäßig über die gesamte Webseite verteilt. Das hat den Vorteil, dass nur dieses kleine Bild geladen werden muß und trotzdem die ganze Seite oder Teile, wie beispielsweise Schmuckkanten mit dieser Grafik gefüllt werden können.
Auch in Html läßt sich der Hintergrund von Webseiten mit Hilfe von Hintergrundbildern gestalten. Im einleitenden body Tag schreiben Sie dafür:
<body background="background.jpg">
Wollen Sie das Hintergrundbild auf allen Unterseiten Ihrer Website verwenden, müssen Sie es in jede Unterseite im body Tag einfügen. Nicht zuletzt deshalb sollten Sie die oben beschriebene Css-style-Anweisung dieser Html-Formatierung vorziehen.
Bei Verwendung von kleinen Hintergrundbildern zum Kacheln ganzer Webseiten, wird die Ladezeit der Webseiten gegenüber der Verwendung einer großen Hintergrundgrafik deutlich reduziert. Die Größe des Browserfensters oder die Auflösung des Bildschirmes spielt dabei keine Rolle, weil das Hintergrundbild einfach randlos (wenn nicht anders definiert) gekachelt wird. Wird das Browserfenster vergrößert erscheinen einfach weitere "Kacheln" der eingesetzten Grafik auf dem Bildschirm.
Wird die Website in einem bestimmten Format angelegt, kann es Sinn machen, ein Hintergrundbild für den um die Website befindlichen Bereich anzugeben. Auf Bildschirmen, welche die gleiche Größe wie die Website besitzen, wird das Hintergrundbild zwar nicht sichtbar sein aber auf größeren Bildschirmen erscheint die Hintergrundgrafik und der sonst eintönig, vielleicht langweilig weiße Hintergrund ist passend, optimalerweise im Stil des hauptsächlichen Webdesign gestaltet. Sie können damit, bei geschickter Gestaltung, einen harmonischen Eindruck von Abgeschlossenheit und Professionalität Ihrer Webseiten auch auf verschieden großen Monitoren erreichen.
Der Einsatz von Hintergrundbildern im Webdesign bringt, gegenüber normal per img-Tag eingebundener Bilder, noch einen weiteren Vorteil. Auf einer mit Bildern gekachelten Webseite können bequem, ohne Überlagerungen von Layern, die Texte platziert werden. Je nach Art der Website sollten diese Hintergründe jedoch sehr dezent gestaltet sein, damit der Text auch gelesen werden kann und nicht in einem wilden Wirrwarr untergeht.
Die Verwendung von Hintergrundbildern, den sogenannten backgrounds oder auch wallpaper, beschränkt sich nicht nur auf den body. Auch Tabellenzellen oder per css definierte Bereiche einer Webseite können so geschmückt werden. Ihrer gestalterischen Fantasie sind also kaum Grenzen gesetzt.
Sie können beispielsweise bestimmen, dass nur eine Zeile oder eine Spalte Ihres Webseitenhintergrundes mit einem Background versehen wird. Verwenden Sie zum Kacheln von Zeilen :
background-repeat: repeat-x;
Zum Kacheln von Spalten schreiben Sie:
background-repeat: repeat-y;
Die Hintergrundbilder auf dieser Webseite eignen sich zum Anlegen von Schmuckkanten, ähnlich der Anwendungsbeispiele darunter. Um Text darüber zu platzieren eignen sie sich weniger, weil dieser dadurch schlecht lesbar wäre. Achten Sie bei der Umsetzung des Webdesign immer darauf, Hintergrundbilder sparsam und dezent und dem Inhalt der Website entsprechend einzusetzen. Zu aufdringliche Bilder lenken vom wesentlichen Inhalt der Website ab.
Obwohl Sie auf eine Einheit aller Unterseiten einer Website achten sollten kann es auch sehr reizvoll sein, auf einzelnen Unterseiten verschiedene Hintergrundbilder einzusetzen, nur nicht wahllos irgend welche Grafiken, die Sie gerade im Internet gefunden haben, sondern immer im Bezug auf das Thema jeder einzelnen Unterseite und in der Gesamtheit auf die ganze Website.
Ein Beispiel dafür wäre eine Website die sich mit dem Hauptthema um die Natur dreht und Unterthemen zu Tieren und Pflanzen anbietet. Hier können für die Pflanzenthemen natürlich andere Hintergrundbilder verwendet werden als für die Tierkategorien. Auch innerhalb der Kategorien können die Hintergrundbilder variieren. Diese zusammengehörigen Hintergrundbilder werden Sie allerdings selten kostenlos im Internet finden. Entweder Sie fertigen die benötigten Hintergrundgrafiken selbst an oder lassen Sie von einem Webdesigner oder einer Webdesignerin anfertigen.
In unserer Bildergalerie finden Sie weitere background-images zum Download.
Mit diesem Anwendungsbeispiel für background-images können Sie sich die Verwendung von Hintergrundbildern noch einmal veranschaulichen.