Adventskalender - Seitenhintergrund

Bei einigen Versionen meiner Online-Adventskalender (nicht bei allen) besteht die Möglichkeit statt einer Seiten-Hintergrundfarbe eine Grafik für den Seitenhintergrund festzulegen.

Hintergrundgrafik der HTML-Seite a) seitenfüllend Beim Hintergrundbild für eine gesamte HTML-Seite benötigt man eine einzige, entsprechend große seitenfüllende Grafik. Entsprechende Grafiken sind manchmal in den Downloads enthalten oder können separat heruntergeladen werden. b) gekachelt Beim Hintergrundbild als Kachel, wird die Grafik durch den Browser gesteuert, seitenfüllend wiederholt. Daher kann man auch Grafiken mit kleinen Abmessungen verwenden. Rechts hat die Kachel zur Demo einen Rand. Entsprechende Grafiken sind manchmal in den Downloads enthalten oder können separat heruntergeladen werden (siehe unten). Demo ansehen (Kalender 01-04)

body {
...

/* statt */
background-color:#273447;

/* Seiten-Hintergrundgrafik gekachelt */
background: url(grafik01.gif) #273447  top left;

body {
...

/* statt */
background-color: #273447;

/* Seiten-Hintergrundgrafik unten links ausgerichtet */
background: url(himmel02.jpg) #273447 bottom left fixed;

/* Seiten-Hintergrundgrafik oben links ausgerichtet */
background: url(himmel02.jpg) #273447 top left fixed;

...

1  Grafik-Kachel 300 × 300 Pixel Grafik: bg-01.gif - (Originalgröße)

Die Hintergrundgrafiken habe ich selbst erstellt und dürfen ausschließlich für meinen Kalender eingesetzt werden! Grafiken zum Download rechtsklicken

Grafik: bg-02.gif 300 × 300 Pixel (verkeinerte Darstellung)	Grafik: bg-04.gif 300 × 300 Pixel (verkeinerte Darstellung)	Grafik: bg-05.gif 300 × 300 Pixel (verkeinerte Darstellung)
Grafik: bg-06.gif 300 × 300 Pixel (verkeinerte Darstellung)	Grafik: bg-07.gif 300 × 300 Pixel (verkeinerte Darstellung)	Grafik: bg-08.gif 300 × 300 Pixel (verkeinerte Darstellung)
Grafik: bg-09.gif 300 × 300 Pixel (verkeinerte Darstellung)	Grafik: bg-10.gif 300 × 300 Pixel (verkeinerte Darstellung)	Grafik: bg-11.gif 300 × 300 Pixel (verkeinerte Darstellung)

body {
...

/* statt */
background-color: #9F1718;

/* Seiten-Hintergrundgrafik bg-02.gif oben links ausgerichtet */
background: url(bg-02.gif) #9F1718 top left fixed;

...

Die Grafik wird mittels CSS-Angaben unten links angeordnet. Abmessung 20 x 1050 Pixel. Auch diese Hintergrundgrafik (himmel03.gif) können sie herunterladen! Die Grafik zeigt einen Farbverlauf und am unteren Rand angedeuteten Schnee. Der Browser übernimmt die Aufgabe der gekachelten Anzeige automatisch. Die Grafik füllt dadurch den Bildschimhintergrund. Zur Verwendung dieser Grafik müssen sie (nach dem Download und der Ablage im Ordner des Adventskalenders) die Anweisung im CSS-Block ändern. Download himmel03.gif

/* Seiten-Hintergrundgrafik */
background: url(himmel03.gif) #273447 bottom left fixed;

Ansicht mit Hintergrundgrafik

Ansicht mit Hintergrundfarbe

/* Seiten-Hintergrundgrafik */
background: url(himmel-10.gif) #4B5390 top left fixed;

Diese Grafik zeigt im oberen Bereich angedeutete Sterne vor einem tiefdunklen Hintergrund und am unteren Rand angedeuteten Schnee. Die Grafik soll mittels CSS-Angaben unten links ausgerichtet werden. Durch die Abmessungen von 1400 x 1050 Pixel sollte die Grafik bildschirmfüllend sein. Download himmel01.gif Eine zweite Hintergrundgrafik (himmel02.gif) zeigt über den gesamten Bereich Schneeflocken vor einem tiefdunklen Hintergrund und am unteren Rand angedeuteten Schnee. Nach dem Download der alternativen Grafik und der Ablage im Ordner des Adventskalenders können sie im CSS-Block die Dateibezeichnung für die Hintergrundgrafik entsprechend anpassen. Download himmel02.gif Falls sie keine der beiden Grafiken einsetzen möchten, löschen sie die Zeile für die Anweisung der Hintergrundgrafik und ersetzen sie mit einer Anweisung für eine Hintergrundfarbe.

body {

...

margin:0px;
padding:0px;

/* Seiten-Hintergrundgrafik */
background:url(himmel02.jpg) #273447 bottom left fixed;
}