 Hintergrundbilder 02 (Seitenhintergrund großflächig)
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.
Hintergrundgrafik als Bildschirm-Füller
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 Hintergrundgrafik
Eine solche 'seitenfüllende' Grafik von 1024 Pixeln Breite ist demnach auch nicht mehr 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.
Grafik 1024 x 849 Pixel zum Experimentieren
  bg1024-demo.gif (5,5 kB)
Link anklicken, Grafik (im neuen Browserfenster) rechtsklicken und speichern.
Der linke weiße Bereich ist ca. 590 Px breit. Inhalte könnten auf diesem weißen Bereich angezeigt werden.
|
|
Diese Grafik hat einen vorgesehenen Inhaltsbereich (weiß) von ca. 590 Pixel und füllt einen Bereich von 1024 Pixel Breite. Wenn (so wie hier auf meiner Seite) links noch ein Menü von 200 Pixel Breite angezeigt wird, kann man damit ein Fenster von 1224 Pixel Breite füllen.
Ist die Anzeige- / Fensterbreite größer, ergeben sich 3 Möglichkeiten:
1) Die Hintergrundgrafik könnte man gekachelt (repeat) anzeigen lassen. Das bedeutet, rechts neben dem grauen Bereich mit der Hand, beginnt die Anzeige der Hintergrundgrafik erneut. Rechts neben dem grauen Bereich würde dann der weißen Hintergrund der Grafik zu sehen sein, was in einem senkrechten weißen Streifen resultiert, weil der graue Bildbereich idR nicht mehr zu sehen sein wird.
2) Die Hintergrundgrafik könnte man nur einmal (no-repeat) anzeigen lassen. Mit der Einstellung no-repeat endet die Anzeige neben dem grauen Bereich mit der Hand. Dort könnte man mit dem Eintrag der alternativen Hintergrundfarbe im gleichen Grauton (#ECECEC), eine Anzeige im gleichen Farbton fortsetzen oder in einem farbverwandten Ton fortsetzen.
3) Die Hintergrundgrafik könnte man rechts ausgerichtet anzeigen lassen. Das bedeutet, unabhängig vom Anzeigeort des Seiteninhalts wird die Hintergrundgrafik am rechten Fensterrad positioniert. Sie müssen Vorkehrungen für den Fall treffen, in dem die Anzeigenbreite so klein ist, dass die Hintergrundgrafik sich hinter den Seiteninhalt schiebt. Legen sie eine Hintergrundfarbe für Textbereiche fest. Demonstration im Beispiel 3 (Fenster verkleinern)
body {
background:url(grafik.gif) #ECECEC no-repeat top left fixed;
margin:0px;
}
Auch ein anderer Farbwert (z.B. ein noch dunklerer Grauton) könnte ganz passabel aussehen.
Weitere Möglichkeiten bieten sich mit Hilfe von diesen CSS-Anweisungen
| |
+ 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 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 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
|
Home
ZURÜCK 
1 anderer Farbton