Hintergrundbild einfügen
    
Home
ZURÜCK  SITEMAP  

 Hintergrundbilder 03   (positionierte Grafik)

Grafiken als Seitenhintergrund. Die Grafiken sollen bei hohen Auflösungen den Bildschirm nicht leer erscheinen lassen. Dazu wird (in diesem Beispiel rechten) frei bleibenden Fenster-Bereich eine Grafik plaziert. Die hier beschriebene Technik ist nur über die Einbindung mit CSS-Anweisungen möglich.

Hintergrundgrafik als Design-Element

Die Grafik lockert den ansonsten leeren rechten Bildschirmbereich auf. Sie dient als Design-Element und schafft eine optische Balace.

Die Grafik wurde am rechten unteren Fensterrand positioniert, wird nicht wiederholt und bleibt beim Scrollen an fester Position.


   Positionierung

Die Positionierung können sie über die Angaben top, bottom, right und left festlegen oder aber über Maßangaben (z.B.Pixel), ausgehend vom linken oberen Fensterrand bestimmen. Neben der Notierung für die Grafik-URL und der alternativen Farbe wird die Positionsangabe eingetragen. Beispiele:

a) background-position:100px 100px;
b) background-position:bottom left;
c) background-position: top right;
d) background-position: bottom right;

background: url(grafik.gif) #FFD7EA;
background-position: Positionsangabe;
background-attachment: fixed;
background-repeat: no-repeat;

JPG-Grafik einbinden

Als Grafik-Typ können sie eine JPG-Grafik einbinden. Dann sollte möglicht eine alternative Farbangabe notiert werden. Die Angabe für eine Farbe bezieht sich auf den Seitenbereich, der nicht durch die Grafik abgedeckt wird. Diesen Farbwert sollte man mit der Grafik abstimmen.

background: url(grafik.gif) #D5D5FF;


transparente GIF-Grafik einbinden

Als Grafik-Typ können sie auch eine transparente GIF-Grafik einbinden. Dann sollte eine Farbangabe notiert werden. Die Angabe für die Farbe bezieht sich auf die Hintergrundfarbe für den gesamten Seitenbereich. Auch für den transparenten Bereich der GIF-Grafik.

background: url(grafik.gif) #FFD7EA;




   Grafik für eigene Experimente

Jetzt ist es an der Zeit, das alles einmal auszutesten. Dazu halte ich hier eine transparente GIF-Grafik bereit. Bildquelle: Wikimedia-Commons. Der transparente Bereich läßt eine Positioninierung mit ausreichendem Abstand zum Fensterrad zu. Die Grafik ist nur hier zur Demo mit Rand dargestellt.

Laden sie die Grafik herunter und fügen die CSS-Anweisungen in den Head-berich ihres HTML-Dokumentes ein. Die Anweisung gilt für den Fall, wo die Grafik im gleinen Verzeichnis wie die HTML-Datei steht. Sollten sie die Grafik in einem Unterordner ablegen, muss der Pfad entsprechend eingetragen werden.

CSS-Notierung im Head 
<style type="text/css">
<!--
body{
background: url(grafik01.gif) #F9FFF9;
background-position: bottom right;
background-attachment: fixed;
background-repeat: no-repeat;
margin:0px;
padding:0px
}
-->
</style>

Den Farbwert für die Hintergrundfarbe ihrer Seite passen sie nach Belieben an!






Zum Thema 'Hintergrundgrafiken' lesen sie die Informationen auf den Seiten:

1) Hintergrundbild einfügen

2) Hintergrundbild großflächig

4) Gekachelte Grafiken als Tabellen- und Seitenhintergrund






NACH OBEN