Bild als Hintergrund

1 - Einleitung

Wie beim Computer kann auch bei einer Webseite ein Hintergrundbild eingerichtet werden. Dabei gibt es einige Aspekte die beachtet werden sollten:

  • Das Hintergrundbild sollte nicht zu sehr von Content (dem Inhalt) ablenken
     
  • Die Dateigröße des Hintergrundbildes solltesich in Grenzen halten. Besonders bei Aufrufen von Mobilgeräten kann das ansonsten zu hohen Ladezeiten führen
     
  • Das Hintergrundbild sollte bei allen Bildschirmauflößungen gut aussehen
     
  • Wenn sich das Hintergrundbild kachelt (sich horizontal und evtl. auch vertikal wiederholt) sollte man keinen Übergang zwischen den Kacheln sehen

2 - Hintergrundbild mit CSS einbinden

Ein HTML Hintergrundbild wird mittels CSS definiert. Im Folgenden ein Beispiel.

CSS-Code:

* body {
		background-image:url(hintergrund.jpg);
}

Anmerkung:
Wenn die Hintergrundgrafik eine geringere Auflösung hat als das Browserfenster wiederholt es sich horizontal sowie vertikal. Das Problem dabei ist, dass wenn sich ein und dasselbe Bild wiederholt, es an den Kanten meist nicht zusammenpasst. Muster können passgenau zugeschnitten werden.

3 - Hintergrundbild wiederholt sich. Wie verhindern?

Folgende Ergänzungen steuern das Wiederholen der Hintergrundgrafik:

* body {
		background-image:url(hintergrund.jpg);
		background-repeat : no-repeat;
}

* body {
		background-image:url(hintergrund.jpg);
		background-repeat : repeat-x;
}

* body {
		background-image:url(hintergrund.jpg);
		background-repeat : repeat-y;
}

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

2 thoughts on “Bild als Hintergrund

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.