Hintergrundbilder 02   (Hintergrundgrafiken mit CSS - 18 Demos)

Grafiken als Seitenhintergrund. Die Grafiken sollen bei hohen Auflösungen den Bildschirm nicht leer erscheinen lassen. Dazu soll im frei bleibenden Fenster-Bereich eine Grafik angezeigt werden. Im Gegensatz zur Einbindung mit HTML-Anweisungen bietet die Einbindung mit CSS Anpassungsmöglichkeiten.

Die Grafik füllt den ansonsten leeren rechten Bildschirmbereich. Der Screenshot zeigt eine 800 Pixel breite Webseite, bei einer Auflösungsbreite von 1024 Pixeln. Mit den derzeit im Handel angebotenen TFT-Displays und deren Auflösung von 1280 oder sogar 1680 Px kann das Verhältnis zwischen Inhaltsbreite und leerem Raum rechts (bei einer links angeordneten Webseite) noch extremer aussehen.

Grafik 1024 x 849 Pixel zum Downloaden  bg1024-demo.gif (5,5 kB) Link anklicken, Grafik (im neuen Browserfenster) rechtsklicken und speichern. Wenn Sie meine Beispiele austesten und mit einer Hintergrundgrafik experimentieren möchten, laden sie diese Grafik herunter.

Solche Grafiken mit weißen Bereichen für den Seiteninhalt machen in der Praxis wenig Sinn. Da würde eine graue Grafik von 200 Pixel Breite normalerweise völlig ausreichen. Das werden Sie in den Beispielen weiter unten, schnell erkennen. Lediglich in CSS-Layouts finden sie eine Anwendung als Hintergrundgrafik für Spaltenlayouts.

Für meine ersten 8 Fallbeispiele verwende ich eine Hintergrundgrafik von 800 x 600 Pixel, damit auch blei kleineren Bildschirmen die Demo anschaulich wird. Bitte beachten Sie auch meine Erklärungen auf den Seiten gekachelte Hintergrundgrafik positionierte Hintergrundgrafik

Ist der Anzeigebbereich / das Fenster größer als die Hintergrundgrafik, wird die Grafik ohne weitere CSS-Angaben gekachelt. Das bedeutet: Die Grafik würde nebeneinander und gegebenenfalls auch unterhalb wiederholt angezeigt. (rechts farblich hervorgehoben)

body {
background:url(bg800-demo.gif) top left fixed;
margin:0px;
padding:0px;
}

Auch wenn der Anzeigebbereich / das Fenster größer als die Hintergrundgrafik ist, wird die Grafik mit der CSS-Angabe 'no-repeat' lediglich 1 x angezeigt. Das bedeutet: Die Grafik wird nicht wiederholt (gekachelt). Mit der Ausrichtung oben links und unzureichender Höhe ist diese Formatierung nur in bestimmten Fällen sinvoll.

body {
background:url(bg800-demo.gif) #FFFFFF no-repeat top left fixed;
margin:0px;
padding:0px;
}

Dort, wo die Grafik den Hintergrund nicht abdeckt, erscheint der Fensterhintergrund in der festgelegten Farbe #808080. Bei meiner Demo, wo die Grafik nicht die gesamte Fensterhöhe ausfüllt und auch nicht vertikal gekachelt wird, erscheint eine Kontrast- / Komplementärfarbe wenig sinnvoll. Füllt die Grafik zumindest den Inhaltsbereich in vertikaler Richtung, ist diese Variante durchaus ansprechend.

body {
background:url(bg1024-demo.gif) #808080 no-repeat top left fixed;
margin:0px;
padding:0px;
}

Es ist manchmal sinnvoll, für den nicht mit der Grafik abgedeckten Bereich, einen angepassten Farbton zu verwenden. Bei meiner Demo 4-1, wo die Grafik nicht die gesamte Fensterhöhe ausfüllt und auch nicht vertikal gekachelt wird, erscheint diese Angabe wenig sinnvoll. Zum Vergleich schauen Sie auf die Demo 4-2.

body {
background:url(bg1024-demo.gif) #ECECEC no-repeat top left fixed;
margin:0px;
padding:0px;
}

Die Ausrichtung der Hintergrundgrafik macht besonders in Verbindung mit Anweisungen für eine Kachelung in der X-Achse oder Y-Achse Sinn. Eine Demo mit diesen zusätzlichen Angaben finden Sie weiter unten. Hier geht es lediglich um den Grundsatz der Ausrichtung oben / unten + rechts / links

body {
background:url(../images/bg800-demo.gif) #FFFFFF no-repeat top right fixed;
margin:0px;
padding:0px;
}

Die Ausrichtung der Hintergrundgrafik macht besonders in Verbindung mit Anweisungen für eine Kachelung in der Y-Achse Sinn. Soll die Grafik den Seiteninhalt hinterlegen, wird man eine linke Ausrichtung wählen. Wird die Grafik als Seitenfüller eingesetzt wählt man eher eine rechte Ausrichtung.

body {
background:url(../images/bg800-demo.gif) #FFFFFF repeat-y top left fixed;
margin:0px;
padding:0px;
}

Die Wiederholung der Hintergrundgrafik in horizontaler Richtung wird häufig bei schmalen Grafiken mit einem Farbverlauf eingesetzt (siehe Demo sinnvoller Einsatz). Diese Formatierung wird in beiden Situationen eingesetzt Grafik soll den Seiteninhalt hinterlegen Grafik als Seitenfüller / Blendschutz

body {
background:url(../images/bg800-demo.gif) #FFFFFF repeat-x top left fixed;
margin:0px;
padding:0px;
}

Die Erklärung für das Attribut 'fixed' habe ich Ihnen bisher unterschlagen. Es bewirkt, dass die Hintergrundgrafik an der vom Browser oder durch CSS-Angaben festgelegten Position fest verankert ist. Beim Scrollen werden die Inhalte über der fest positionierten Hintergrundgrafik bewegt. Das ist gewollt, wenn z.B. ein Logo immer unten rechts angezeigt werden soll.

body {
background:url(../images/bg800-demo.gif) #FFFFFF repeat-y top right;
margin:0px;
padding:0px;
}

In dieser Demo ist die Grafik transparent. Der Bereich um die Maus herum ist nicht eingefärbt. Daher kann ein und dieselbe Grafik für unterschiedliche Hintergrundfarben eingesetzt werden! Diese Option hält Ihnen den Rücken frei, sollten Sie sich später entscheiden, die Hintergrundfarbe doch um eine kleine Nuance heller / dunkler einzufärben.

body {
background:url(bg05.gif) #C4D3F6 no-repeat bottom right fixed;
margin:0px;
padding:0px;
}

• Ist die eingebundene Grafik nicht groß genug den gesamten Bereich zu füllen und man verhindert das nicht explizit, wird sie 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 die Grafik rechts und unten 'abgeschnitten'.

1) Hintergrundbild einfügen

3) positionierte Hintergrundgrafik

4) Gekachelte Grafiken als Tabellen- und Seitenhintergrund