Inhalt
1 – Einleitung
Wie beim Computer kann auch bei einer Webseite ein Hintergrundbild eingerichtet werden. Zum einfachen Bild Einbinden in HTML haben wir dir das entsprechende Tutorial verlinkt. 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
background-image:url(bild.jpg);
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.
Kleine Fehler aufgetaucht
3. Die Angabe repeat-x sorgt dafür, ..
müßte richtig lauten
3. Die Angabe repeat-y sorgt dafür, ..
MfG Preinsperger
Besten Dank für den Hinweis, ist korrigiert!