Grafiken in HTML als Hintergrund einstellen

Hintergrundgrafiken

 

Grafiken und Fotos können auch als Hintergrundbilder der Webseite verwendet werden. Beispiel für eine GIF-Grafik (es funktioniert entsprechend mit JPG-Dateien):

<BODY BACKGROUND=“hintergrundbild.gif“>

Natürlich müssen darüberliegende Texte noch lesbar bleiben. Die Hintergrundbilder sollten also eher dezent mit geringem Kontrast und großer Helligkeit gestaltet werden. Oder die Schrift müßte entsprechend angepaßt werden.

Ist das Hintergrundbild kleiner als das Browserfenster, wird es „gekachelt“, d.h. das Bild wiederholt sich so lange, bis das ganze Fenster ausgefüllt ist.

Eine alternative ALT-Beschreibung oder Größenangaben sind bei Hintergrundbildern naturgemäß nicht notwendig. Wenn der Browser die angegebene Grafikdatei nicht findet, bedient er sich bei der Hintergrundfarbe. Ist diese im Dokument nicht ausdrücklich deklariert, nimmt er eben die im Browser voreingestellte Farbe.

HinweisEs kann durchaus sinnvoll sein, trotz angegebener Hintergrundgrafik die Hintergrundfarbe zusätzlich zu deklarieren. Angenommen Sie haben eine sehr helle Farbe zur Darstellung des Textes gewählt. Ein User, der die Grafikanzeige in seinem Browser deaktiviert hat, wird kaum oder gar keinen Text sehen können, wenn der Browser den üblichen Wert „weiß“ als Hintergrundfarbe anzeigt.

 

Hintergrundbilder können übrigens in der eben beschriebenen Art auch für ganze Tabellen

<TABLE BACKGROUND=“hintergrundbild.gif“>

oder einzelne Tabellenzellen

<TD BACKGROUND=“hintergrundbild.gif“ >

verwendet werden. Allerdings ist das von der Browserversion abhängig.

Ein sehr schöner Effekt kann durch

<BODY BACKGROUND=“hintergrundbild.gif“ BGPROPERTIES=FIXED>

erreicht werden. Normalerweise scrollt ja die Hintergrundgrafik mit; verschiebt sich also nach oben oder unten mitsamt darüberliegendem Text, wenn der Rollbalken entsprechend betätigt wird. Durch die Ergänzung <BGPROPERTIES=FIXED> wird genau das verhindert. Nur noch der Text wird bewegt, die Grafik ist fixiert. Jetzt kommt der Pferdefuß: Leider kann nur der Internet Explorer das Attribut interpretieren.

Tips

 

 

  • Beachten Sie ein mögliches Copyright fremder Grafiken und Fotos.
  • Verwenden Sie am besten nur die Dateiformate GIF und JPG. Diese werden von den heute verbreiteten Browsern ohne Probleme dargestellt.
  • Bitte beachten Sie, daß beim Laden einer HTML-Seite die darauf sichtbaren Grafiken, Fotos und Animationen mitgeladen werden.
  • Die Fähigkeit der Browser, Webseiten mit allen zugehörigen Dateien lokal auf Ihrer Festplatte zu speichern und sich bei wiederholtem Aufruf einer Datei aus dem schnellen Zwischenspeicher zu bedienen, kommt auch bei Grafiken zum Tragen. Gleichbleibende Hintergründe, grafische Schaltflächen, Logos usw. müssen nur einmal aus dem Internet geladen werden. Das ermöglicht einen schnelleren Seitenaufbau beim weiteren Surfen.
  • Geben Sie grundsätzlich die Breite WIDTH und die Höhe HEIGHT eines Bildes oder einer Grafik an.
  • Verwenden Sie ALT-Beschreibungen.
  • Beschränken Sie die Bildauflösung auf 72 dpi, da der Monitor höhere Auflösungen normalerweise nicht anzeigen kann. Für Ausdrucke können allerdings höhere Werte relevant sein.
  • Die Dateigröße ist abhängig von Breite und Höhe, der Auflösung und von der Anzahl der verwendeten Farben (Farbtiefe).
  • Die Dateigröße kann im Windows-Explorer festgestellt werden: Die Datei mit der rechten Maustaste anklicken und dann „Eigenschaften“ wählen. Wesentlich besser ist natürlich ein Grafikviewer.
  • Generell sollten vor allem größere Grafiken oder Bilder eher weiter unten im Browserfenster erscheinen. Beschäftigen Sie also den Besucher Ihrer Seiten mit dem Lesen von Text, während der Bildaufbau langsam voranschreitet.
  • Will man unbedingt größere Bilder auf seiner Seite unterbringen, ist es auch eine ganz gute Methode, zunächst entsprechende Mini-Bilder zu zeigen und dem Nutzer das umfangreichere Laden der größeren Bilder (per Link) zu überlassen. Dazu ist es allerdings notwendig, tatsächlich zwei Versionen eines Bildes zu erstellen.
  • Sehen Sie sich das Layout Ihrer Seiten auch mit abgeschalteten Grafiken an.

Ein Hinweis an dieser Stelle: Die Themenbereiche „Grafiken als Verweise“ und „Image Maps“ werden auf anderen Seiten des HTML-Kurses behandelt.

Wir freuen uns auf Ihr Projekt. Kontaktieren Sie uns!
Kostenlose Erstanalyse

Beratung vereinbaren