Hintergrundbilder auf HTML-Seiten

Um einer Seite ein Hintergrundbild zu geben, ergänze einfach das Bodytag um background="dein Bild". "dein Bild" musst du natürlich durch den Namen deines Bildes ersetzen. Wenn dein Bild nicht im selben Ordner wie die Htmlseite ist, musst du auch den Pfad angeben. Dabei kannst du relative oder absolute Pfadangaben verwenden. In jedem Fall muß das Bild als separate Datei zur Verfügung stehen.

Pfadangaben

Ein Beispiel für ein Bodytag mit Hintergrund und absoluter Pfadangabe ist z.B. <body background="http://members.surfeu.de/frakt1_a.gif">.

Ein relativer Pfad beschreibt den Weg zum Bild von der HTML-Seite aus. Das Bodytag <body background="frakt1_a.gif"> gibt an, dass das Bild frakt1_a.gif, das sich im selben Verzeichnis wie die HTML-Seite befindet, als Hintergrund verwendet werden soll. Das Bodytag <body background="bg/frakt1_a.gif"> gibt an, dass das Bild frakt1_a.gif, das sich im Ordner bg befindet, der sich im selben Verzeichnis wie die HTML-Seite befindet, als Hintergrund verwendet werden soll. Das Bodytag <body background="../bg/frakt1_a.gif"> gibt an, dass das Bild frakt1_a.gif als Hintergrund verwendet werden soll, das sich im Ordner bg befindet, der sich im selben Verzeichnis befindet, wie der Ordner, der die HTML- Seite enthält. Mit ../ bewegt man sich in der Ordenstruktur also um eine Ebene nach oben.

Was zu beachten ist

Natürlich muß man darauf achten, dass das Bild einen deutlichen Kontrast zur Schrift und allen anderen Elementen der Seite hat. Außerdem sollte der Hintergrund keine "kräftigen" Farben enthalten. Er lenkt sonst zu sehr vom Seiteninhalt ab und die Seite wirkt sehr unübersichtlich. Der Hintergrund ist ein Bild und braucht daher wesentlich länger zum Laden als der Text. Wähle also ein kleines Bild mit geringer Farbtiefe und denke daran, dass der User beim ersten Besuch deiner Seite die Seite eine Weile ohne Hintergrundbild sieht. Das Hintergrundbild kann nicht skaliert werden. Es wird oben links in die Ecke gesetzt. Wenn das Fenster, in der die Seite dargestellt wird, dann nicht ausgefüllt ist, wird es rechts daneben wiederholt bis die Zeile voll ist. Diese Zeile wird so oft wiederholt, bis das Fenster ausgefüllt ist. Es ist also darauf zu achten, dass der linke Bildrand zum rechten passt und dass der obere Bildrand zum unteren passt. Das Hintergrundbild für diese Seite ist 1 Pixel breit und 500 Pixel hoch. Es ist also nicht notwendig ein Bild zu verwenden, das so groß ist wie die Seite!

Soll sich der Hintergrund beim Scrollen mitbewegen?

Wenn du den Hintergrund wie oben beschrieben gemacht hast, bewegt er sich beim Scrollen mit. Um das zu demonstrieren habe ich extra einen senkrechten Regenbogen gemacht obwohl ich ihn waagerecht schöner finde. Wenn sich der Hintergrund nicht mit bewegen soll musst du das oben beschriebene Bodytag noch um bgproperties="fixed" ergänzen. Es könnte dann also so lauten: <body background="frakt1_a.gif" bgproperties="fixed">.

Achtung! Der feststehende Hintergrund funktioniert nur im Internet Explorer. In allen anderen Browsern bewegt sich der Hintergrund beim Scrollen trotzdem mit.

Probier das mit dem Scrollen mal aus. Ich habe die Seite extra künstlich soweit vergrößert, dass sicher auf jedem noch so großen Monitor Scrollbars zu sehen sind.

Wenn du diesen Satz anklickst, kannst du zwischen einem mitbewegenden und einem feststehenden Hintergrundbild wechseln.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: