STARTSEITE eidechse
grafik

Bild als Hintergrund

Webspace schon ab 0,79 Euro!Wie beim Computer kann auch bei einer Webseite ein Hintergrundbild eingerichtet werden. Dabei gibt es einige Aspekte die beachtet werden müssen:
  • Das Hintergrundbild darf nicht zu sehr von Content (dem Inhalt) ablenken
  • Die Dateigröße des Hintergrundbildes muss sich in Grenzen halten
  • Das Hintergrundbild muss auch bei größeren Bildschirmauflößungen gut aussehen
  • Wenn sich das Hintergrundbild kachelt (sich horizontal und evtl. auch vertikal wiederholt) sollte man keinen Übergang zwischen den Kacheln sehen

Ein Hintergrundbild wird mit CSS definiert, hier ein Beispielcode:
* body {
		background-image:url(hintergrund.jpg);
}
Anmerkung:
Wenn die Hintergrundgrafik eine geringere Auflösung hat als das Browserfenster wiederholt es sich horizontal und vertikal. Das Problem dabei ist, dass wenn sich ein und dasselbe Bild wiederholt, es an den Kanten meist nicht zusammenpasst. Bei Mustern ist das auch ein knifflige Sache.

Hintergrund nicht oder nur eindimensional wiederholen

Folgende Ergänzungen steuern das Wiederholen der Hintergrundgrafik: 
01 * body {
02 		background-image:url(/img/navi_back.gif);
03 		background-repeat : no-repeat;
04 }
05 
06 * body {
07 		background-image:url(/img/navi_back.gif);
08 		background-repeat : repeat-x;
09 }
10 
11 * body {
12 		background-image:url(/img/navi_back.gif);
13 		background-repeat : repeat-y;
14 }

Erklärung:
03: Die Angabe no-repeat vermeidet das Wiederholen der Hintergrundgrafik.
08: Die Angabe repeat-x sorgt dafür, dass sich die Hintergrundgrafik horizontal wiederholt.
08: Die Angabe repeat-x sorgt dafür, dass sich die Hintergrundgrafik vertikal wiederholt.


Auf folgender Seite wird gezeigt, wie man Kacheln mit Mustern erstellt, sodass diese optimal ineinander über gehen.
zurück







nach oben