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.
|
|
großflächige Grafik - Hintergrundbild als Bildschirm-Füller
UPDATE 04.05.2010 18 Demos überarbeitet
|
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. |

|
Seitenfüllende (große) Hintergrundgrafik
Eine solche 'seitenfüllende' Grafik von 1024 Pixeln Breite ist demnach auch nicht unbedingt geeignet. Neben dem Nachteil, dass die Grafik für eine bestimmte Höchstauflösung bestimmt ist, muss der Aspekt der Dateigröße berücksichtigt werden. Das gilt besonders für Grafiken mit einem Farbverlauf, die nur als JPG in hoher Qualität oder PNG gut zur Wirkung kommen.
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.
|
|
Die Grafik hat einen vorgesehenen Inhaltsbereich (hier weiß) von ca. 590 Pixel und füllt ein Fenster von 1024 Pixel Breite. Wenn Sie, so wie hier auf meiner Seite, links noch ein Menü von 200 Pixel Breite einbinden, kann man damit ein Fenster von 1224 Pixel Breite füllen.
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.
Fallbeispiele
1 Grafik wird gekachelt
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;
}
Demo gekachelte Hintergrundgrafik
2 Grafik wird nur 1 x angezeigt
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;
}
Demo nicht gekachelte Hintergrundgrafik 
Demo für einen sinnvollen Einsatzbereich
3 Farbangabe für den nicht ausgefüllten Bereich
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;
}
Demo Farbton festlegen 
Demo für ein Praxisbeispiel
4 Farbangabe für den nicht ausgefüllten Bereich (Farbton angepasst)
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;
}
Demo 4-1 angepasster Farbton 
Demo 4-2 angepasster Farbton
5 Ausrichtung der Hintergrundgrafik
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;
}
Demo 5-1 Grafik oben rechts ausgerichtet 
Demo 5-2 für einen sinnvollen Einsatzbereich 
Demo 5-3 für einen sinnvollen Einsatzbereich
6 Wiederholung der Hintergrundgrafik vertikal
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;
}
Demo Grafik vertikal wiederholt 
Demo für einen praktischen Einsatzbereich
7 Wiederholung der Hintergrundgrafik horizontal
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;
}
Demo Grafik horizontal wiederholt 
Demo für einen sinnvollen Einsatzbereich
8 Hintergrundgrafik soll mitscrollen
|
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. |
 |
Möchten Sie erreichen, dass die Hintergrundgrafik mit dem Inhalt gescrollt wird, lassen Sie das Attribut 'fixed' einfach weg!
body {
background:url(../images/bg800-demo.gif) #FFFFFF repeat-y top right;
margin:0px;
padding:0px;
}
Demo Hintergrundgrafik soll mitscrollen
9 Tipp: Transparente Hintergrundgrafik
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. |
 |
Die Anweisungen unterscheiden sich nicht von meinen Beispielen oben. Die eingetragene Alternativ-Farbe gewinnt an Bedeutung:
body {
background:url(bg05.gif) #C4D3F6 no-repeat bottom right fixed;
margin:0px;
padding:0px;
}
Demo transparente Grafik
Überlegungen
Grundsätzlich ist die Verwendung von seitenfüllenden Grafiken voller Fallstricke. Schließlich ist Ihnen nicht bekannt, mit welcher Auflösung Ihre Seiten betrachtet werden.
Mit den Möglichkeiten von CSS ist es aber nicht zwingend erforderlich, die Hintergrundgrafik ausschließlich im Format von 1600 x 1200 Pixel herzustellen, um für alle Fälle gerüstet zu sein. Die Verwendung von Hintergrundgrafiken bietet Ihnen bei sachgemäßem Einsatz der CSS-Formatierung,völlig neue Möglichkeiten.
Sie haben die Wahl:
Man könnte die Hintergrundgrafik gekachelt (repeat) anzeigen lassen.
Man könnte die Hintergrundgrafik lediglich einmal (no-repeat) anzeigen lassen. Der Eintrag für die alternative Hintergrundfarbe ist dabei von großer Bedeutung
Man könnte die Hintergrundgrafik fest positioniert anzeigen lassen.
Das wäre z.B. eine Lösung, ein Logo (oder einen Text als Grafik) innerhalb eines Fensters immer an der selben Position darzustellen.
Demo Grafik rechts unten fixiert
CSS-Anweisungen für die Wiederholung / Unterdrückung der Wiederholung
| |
+ Anweisung |
Notiz |
| background-repeat: |
repeat; |
wiederholen / kacheln |
| background-repeat: |
repeat-x; |
waagerecht für 1 Zeile wiederholen |
| background-repeat: |
repeat-y; |
senkrecht für 1 Spalte wiederholen |
| background-repeat: |
no-repeat; |
nicht wiederholen (nur 1 X anzeigen) |
|
Regeln
- 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'.

Zum Thema 'Hintergrundgrafiken' lesen Sie die Informationen auf den Seiten:
1) Hintergrundbild einfügen
3) positionierte Hintergrundgrafik
4) Gekachelte Grafiken als Tabellen- und Seitenhintergrund
simple HP-Vorlage (7 Varianten) mit Hintergrundgrafik
|