Hintergrundbild einfügen
    
Home
ZURÜCK  SITEMAP  

 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 Demo unterschiedlicher Anwendungen ohne weitere Erklärungen.

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.

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

Die CSS-Anweisungen für eine Hintetgrundgrafik werden innerhalb des Containers für die Formarierungen des BODY notiert! Die Anweisungen können in der Kurzschreibform (1 Zeile) oder aufgegliedert 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