07.07.2008
Hintergründe mit Texturen und Grafiken
Wem eine einfache Hintergrundfarbe für seine Website zu langweilig ist, der kann auch sogenannte "Texturen" verwenden. Dies sind sozusagen kleine Tapetenmuster, die sich auf der zur Verfügung stehenden Fläche wiederholen oder im Fachjargon "kacheln". Im Web werden zahlreiche fertige Texturen zum Download angeboten. Eine ganz persönliche Note verleihen jedoch Texturen, die selbst erstellt wurden. Das lässt sich mit einem Grafikprogramm recht einfach bewerkstelligen. Wie's funktioniert erkärt wieder Garnet auf www.ohne-pi.gehts-gar.net.
Somit können wir uns hier auf die erforderlichen Codeschnipsel beschränken. Zur Demo soll die Textur
textur_braun.gif
für den gesamten Body-Bereich zum Einsatz kommen und diesen Hintergrundeffekt bewirken. Ihr könnt derartige Grafiken aber auch als Hintergrund für jeden beliebigen Div verwenden.
Hintergrundgrafiken, gleich welcher Art, werden mit folgenden CSS-Angaben dem jeweiligen Element zugewiesen:
background-image: url(textur_braun.gif);
Wird die Grafik für den Bodybereich verwendet, dann lautet die CSS-Angabe folglich:
body {
background-image: url(textur_braun.gif);
}
Sollte - aus welchen Gründen auch immer - die Grafik einmal nicht angezeigt werden (z.B. weil sie versehentlich auf dem Webspace gelöscht wurde), dann ist es sinnvoll, ersatzweise noch eine Hintergrundfarbe anzugeben, die dem Farbton der verwendeten Grafik ähnlich kommt. In Abstimmung zum Hintergrund ist schließlich noch eine Schriftfarbe zu wählen, die einen entsprechenden Kontrast bietet und im Zusammenspiel mit dem Hintergrund gut lesbar ist. Achtet auch darauf, dass der Hintergrund nicht zu unruhig wirkt. Er lenkt sonst vom eigentlichen Inhalt zu sehr ab und erfordert eine erhöhte Konzentration beim Lesen.
Unsere Style-Angaben ergänzen wir deshalb wie folgt:
body {
background-color: #8B5A00;
background-image: url(textur_braun.gif);
color: #F5F5DC;
}
Zwecks Vereinfachung und Code-Ersparnis können sämtliche Backgroundangaben in Kurzschreibweise zusammengefasst werden. Die einzelnen Angaben werden hierzu einfach aneinandergereiht, mit einem Leerzeichen (kein Komma!) getrennt und der Eigenschaft "background" zugewiesen:
body {
background: #8B5A00 url(textur_braun.gif);
color: #F5F5DC;
}
Schon fertig ist unser Texturhintergrund, wie er sich auf unserer Beispielseite darstellt.