 Hintergrundbilder 01 (Webseiten / Tabellen)
Warum und wozu sollte man Hintergrundgrafiken im Design vorsehen? Hintergrundbilder nur als hübsche Textur oder zusätzliche Spielerei? Grafiken auf der Webseite sinnvoll einsetzen.
|
|
Hintergrundbild - Seiten-Hintergrundgrafik
Hintergrundbilder / -grafiken kann man mittels HTML-Befehlen und CSS-Anweisungen einbinden. Der sinvolle Einsatz hängt ganz von der Wirkung ab, die man damit erzielen möchte. Möchte man eine optische Balance oder einfach nur einen wenig langweiligen 'Blendschutz' herstellen, halte ich eine solche Grafik für sinnvoll.
Die Grundlagen für eine Einbindung erkläre ich auf der Seite  Grundlagen und Syntax
Beispiele zur Einbindung finden Sie auf der Seite Hintergrundgrafiken 18 Demos
Webseiten mit und ohne Hintergrundgrafik
1) Beispiel ohne Grafik
|
2) Beispiel großflächige Grafik
|
3) Beispiel positionierte Grafik
|
4) Beispiel gekachelte Grafik
|
Unterscheidung nach Einsatzzweck
|
a) Beispiel optische Balance
|
b) Beispiel Blendschutz
|
Grafik unten rechts angeordnet
Bei großen Bildschirmauflösungen stellt die Grafik (rechts unten fixiert) ein Gleichgewicht zu den optischen Haltepunkten der Seite her.
Würde die Grafik rechts unten fehlen, würde die Webseite 'kippen'. |
seitenfüllende Grafik oben links angeordnet
Für große Bildschirmauflösungen ist rechts neben dem Inhalt der Hindergrund mittels Grafik unauffällig aufgelockert und dunkel.
Mit einem weißen rechten Bereich, wäre die Seite wenig augenfreundlich. |
Bezug auf die beiden Screenshots oben
a) screenshot oben links (optische Balance)
Eine kleine Grafik in der unteren rechten Ecke des Bildschirms / Fensters
Dieses Beispiel erklärt sich beinahe selbst: Die Hintergrundgrafik steht unten rechts am Bildschirm- / Fensterrand und 'bewegt' sich beim Schrollen nicht (fixed). Interessant ist die Farbangabe, die jede anderswo notierte Angabe für die Seitenhintergrundfarbe überschreibt und den Einsatz von transparenten GIFs möglich macht.
CSS-Anweisungen im Head der HTML-Datei
<style type="text/css">
<!--
body {
background:url(grafik.gif) #FFF1BE no-repeat bottom right fixed;
}
-->
</style>
b) screenshot oben rechts (Blendschutz)
Eine seitenfüllende Grafik in der oberen linken Ecke des Bildschirms / Fensters
Hier im nächsten Beispiel orientiert sich die Grafik am oberen linken Bildschirm- / Fensterrand weil a) eine anderslautende Anweisung fehlt (default) und b) durch die X/Y-Angabe 0 Pixel, die Position für die obere linke Ecke der Grafik in der oberen linken Ecke des Fensters festgelegt ist. Auch hier bleibt die Grafik beim Scrollen 'stehen' (fixed).
CSS-Anweisungen im Head der HTML-Datei
<style type="text/css">
<!--
body {
background-image:url(images/bg1024a.gif);
background-position:0px 0px;
background-attachment:fixed;
}
-->
</style>
Regeln
Ist das eingebundene Image nicht groß genug den gesamten Bereich zu füllen und man verhindert das nicht explizit, wird es wiederholt (das Bild wird gekachelt). Daher auch der Name Hintergrundkachel für Grafiken, die sich nahtlos aneinanderfügen. Bei einem zu großen Bild wird, ohne weitere Angaben, die Grafik rechts und unten 'abgeschnitten'.
Zum Thema 'Hintergrundgrafiken' lesen Sie die Informationen auf den Seiten:
0) Grundlagen und Syntax
2) Hintergrundbild großflächig
3) positionierte Hintergrundgrafik
4) Gekachelte Grafiken als Tabellen- und Seitenhintergrund
|
Home • Bilder • CSS • Hintergrundbild