Hintergrundbild einfügen
 HomeBilderCSS • Hintergrundbild  

Hintergrundbilder 01   (Einsatzbereiche)

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.
grafiken hintergrund background positioniert gekachelt

Sinnvoller Einsatz einer 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

Hintergrundgrafik als Seitenhintergrund
2) Beispiel großflächige Grafik

Hintergrundgrafik als Seitenhintergrund

3) Beispiel positionierte Grafik

Hintergrundgrafik als Seitenhintergrund

4) Beispiel gekachelte Grafik

Hintergrundgrafik als Seitenhintergrund


   Unterscheidung nach Einsatzzweck

a) Beispiel optische Balance

Hintergrundgrafik als Seitenhintergrund
b) Beispiel Blendschutz

Hintergrundgrafik als Seitenhintergrund
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 die mit CSS-Anweisungen eingebundene Grafik nicht ausreichend groß den gesamten Bereich zu füllen, wird sie wiederholt (das Bild wird gekachelt). Daher auch der Name Hintergrundkachel für Grafiken, die sich nahtlos aneinanderfügen. Die Wiederholung kann man mit Anweisungen (no-repeat) unterdrücken oder repeat-x und repeat-y steuern.

Bei einem zu großen Bild wird die standardmäßig oben links ausgerichtete Hintergrundgrafik rechts und unten 'abgeschnitten'.







Das könnte Sie auch interessieren: