Warning: Undefined array key "HTTP_REFERER" in /home/www/tipp/websites/tracker_log.php on line 191


Webdesign - Hintergrundbilder als Gestaltungsmittel

Webseiten kacheln

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.

Hintergrund von Webseiten mit Css-style gestalten

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.

Html - Hintergrund gestalten

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.

Vorzüge von Hintergrundbildern

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.

Durch den Einsatz eines einzelnen oder gekachelten Hintergrundbildes auf allen Unterseiten der Website kann, ähnlich wie man dies von Briefpapier her kennt, ein Wasserzeicheffekt erreicht werden. Dies kann werbetechnisch sehr wirksam sein und den Wiedererkennungswert der Seiten steigern.

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.

Tabellenzellen kacheln oder Schmuckkanten anlegen

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.

Hintergrundbilder dem Thema entsprechend verwenden

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.