Hintergrundbild einfügen
    
 Home • CSS • Hintergrundbild einfügen Beispiel

 Seiten-Hintergrundbilder mit CSS - (Beispiele)

Zum Thema "Hintergrundgrafiken als Seitenhintergrundbild mit CSS-Anweisungen notieren" habe ich eine separate Beispielseite erstellt. Der Inhalt beschränkt sich auf die Demo unterschiedlicher Anwendungen ohne weitere Erklärungen.

Beispiele Hintergrundgrafik

Ausführlichere Erläuterungen finden Sie auf der Beispielseite Hintergrundbild einbinden

Den Quellcode der CSS-Anweisungen für die Einbindung einer Hintergrundgrafik können Sie in den 6 Beispieldateien durch Markieren entnehmen. Durch Rechtsklicken innerhalb der Beispielseiten können Sie auch den gesamten Quellcode der Seite anzeigen lassen und kopieren.

Für Ihre ersten Versuche können Sie die verwendeten Hintergrundgrafiken in den Beispielseiten durch Rechtsklick speichern. 3 unterschiedliche Grafiken werden verwendet.



Bildquelle: www.kneller-gifs.de/


Hintergrundgrafik Beispiel 01




Position: unten links

Wiederholung: nein

Mitscrollen: nein

Transparente Grafik: nein

Hintergrundfarbe: wie Grafik

Beispiel im PopUp-Window öffnen 
background:url(schmetterling03.gif) #FFD7EA;
background-repeat: no-repeat;
background-position:bottom left;
background-attachment:fixed;

Hintergrundgrafik Beispiel 02




Position: X 100px   Y 100px

Wiederholung: nein

Mitscrollen: nein

Transparente Grafik: ja

Hintergrundfarbe: wie Grafik

Beispiel im PopUp-Window öffnen 
background:url(schmetterling01.gif) #FFD7EA;
background-repeat: no-repeat;
background-position:100px 100px;
background-attachment:fixed;

Hintergrundgrafik Beispiel 03




Position: unten rechts

Wiederholung: nein

Mitscrollen: nein

Transparente Grafik: nein

Hintergrundfarbe: wie Grafik

Beispiel im PopUp-Window öffnen 
background: url(schmetterling02.gif) #FFD7EA ;
background-position: bottom right;
background-attachment: fixed;
background-repeat: no-repeat;

Hintergrundgrafik Beispiel 04




Position: unten rechts

Wiederholung: ja

Mitscrollen: nein

Transparente Grafik: nein

Hintergrundfarbe: wie Grafik

Beispiel im PopUp-Window öffnen 
background: url(schmetterling03.gif) #FFD7EA ;
background-position: bottom right;
background-attachment: fixed;
background-repeat: repeat;

Hintergrundgrafik Beispiel 05




Position: unten rechts

Wiederholung: ja

Mitscrollen: ja

Transparente Grafik: nein

Hintergrundfarbe: wie Grafik

Beispiel im PopUp-Window öffnen 
background: url(schmetterling03.gif) #FFD7EA ;
background-position: bottom right;
background-repeat: repeat;

Hintergrundgrafik Beispiel 06




Position: X 100px   Y 100px

Wiederholung: nein

Mitscrollen: nein

Transparente Grafik: ja

Hintergrundfarbe: #FFF0FF


Beispiel im PopUp-Window öffnen 
background:url(schmetterling01.gif) #FFF0FF;
background-repeat: no-repeat;
background-position: 100px 100px;
background-attachment: fixed;




   CSS-Anweisungen für ein (Seiten-)Hintergrundbild

Sie erinnern sich: CSS-Anweisungen für ein bestimmtes HTML-Tag (einen bestimmten Selektor) werden in Anweisungsblöcken zusammengefasst. In diesem Block stehen dann die Anweisungen, die für dieses HTML-Tag gelten.


CSS-Anweisungen für die Hintergrundgrafik einer Seite werden im Anweisungsblock des BODY notiert! Die Anweisungen können in der Kurzschreibform (1 Zeile) oder aufgegliedert in mehrere Zeilen notiert werden.

Die Angabe für eine Farbe bezieht sich auf den Seitenbereich, der nicht durch die Grafik abgedeckt wird (bei einer kleineren, nicht wiederholten / gekachelten Hintergrundgrafik). Wird eine JPG-Grafik eingebunden, sollte man diesen Farbwert mit der Grafik abstimmen. 

body {
background:url(grafik.gif) #FFF1BE no-repeat bottom right fixed;
}

body {
background-image:url(images/grafik.gif);
background-position:0px 0px;
background-attachment:fixed;
}





Zum Thema 'gekachelte Hintergrundgrafiken' lesen Sie die Informationen auf der Seite:

 Seite 02: Gekachelte Grafiken als Tabellen- und Seitenhintergrund






NACH OBEN