Hintergrundgrafiken

Die Angabe von Hintergrundgrafiken in (X)HTML beschränkte sich bisher nur auf den Einsatz des Attributs background="pfad_zur/grafikdatei.gif". Dieses konnte im <body> verwendet werden, die so verknüpfte Grafik wurde gekachelt (sobald die Abmessungen des Browserfensters die Abmessungen der Grafik überschritt), oder es konnte bei Tabellenkonstruktionen wahlweise auf die gesamte Tabellenkonstruktion oder auch auf einzelne Zellen angewandt werden. Der so ausgezeichnete Bereich wurde immer von der Grafik komplett aufgefüllt. CSS bietet uns hier völlig neue Eigenschaften, die den Einsatz von Hintergrundgrafiken deutlich flexibilisieren. Dazu gehört neben der Möglichkeit, nahezu allen Elementen (auch Listen etc.) Hintergundgrafiken zuzuweisen auch die Möglichkeiten einer gezielten Kachelung, einer definierten Positionierung und dem Einsatz als "Wasserzeichen".
  		 

Hintergrundgrafik angeben

Eine Hintergrundgrafik wird (für jedes beliebige Element) mit der Eigenschaft background-image angegeben.

Werte für background-image:
none
url (pfad_zu/grafik.jpg)

Standardeinstellung: none
Vererbung: nein
Element: alle Elemente

Beispiel:
<div style="background-image: url(beispiele/hintergrund01.gif)">

 
So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.
 

</div>

demo: body {background-image: url(hintergrundgrafik.gif);}
 

 
Hintergrundgrafik gezielt kacheln

Mit der Eigenschaft background-repeat kann die Kachelung einer Hintergrundgrafik beeinflußt werden.

Werte für background-repeat:
repeat (vertikale & horizontale Kachelung)
repeat-x (nur horizontale Kachelung)
repeat-y (nur vertikale Kachelung)
no-repeat (keine Kachelung)

Standardeinstellung: repeat
Vererbung: nein
Element: alle Elemente

Beispiel:
So sieht no-repeat aus
So sieht repeat aus  
So sieht repeat-x aus
So sieht repeat-y aus
 

demo: h2{background-image: url(hammer.gif);
                 background-repeat: no-repeat;}
   + body {background-image: url(hintergrundgrafik.gif);
               background-repeat: no-repeat; }

 
Hintergrundgrafik positionieren

Die Kachelung (oder auch Nicht-Kachelung) einer Hintergrundgrafik kann über Positionsangaben an einer beliebige Stelle innerhalb des (X)HTML-Dokuments verschoben werden.

Werte:
top, center, bottom
left, center, right
Längeneinheiten in CSS-Maßeinheiten, z.B. Pixel (absolut) oder Prozent (relativ), zuerst in der X- dann in der Y-Achse

Standardeinstellung: top left
Vererbung: nein
Element: alle Elementen, außer eingebundenen (<strong> etc.) & Listenelementen

Beispiel:
<div style="background-image: url(beispiele/hintergrund01.gif);background-repeat: repeat-x; background-position: 50px 20px;">

So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus. So sieht ein solch ausgezeichneter Text aus.

</div>

Erklärung: Durch die Definition der Kachelung in der X-Achse wird die Positionionsangabe "50px" für die X-Achse übergangen.

Beispiel:
So sieht's aus
 

demo: h2{background-image: url(hammer.gif);
                 background-repeat: no-repeat;
                 background-position: center right;}

 

 
Hintergrund festsetzen

Durch Verwendung der Eigenschaft background-attachment kann eine Hintergrundgrafik im Hintergrund fixiert werden, d.h. sie scrollt nicht mit (Wasserzeicheneffekt).

Werte:
scroll
fixed

Standardeinstellung: scroll
Vererbung: nein
Element: sollte nur für <body> verwendet werden, da es bei anderen Elementen zu Anzeigefehlern führt

body {background-image: url(beispiele/hintergrund01.gif); background-attachment: fixed}

Beispiel:
So sieht's aus
 

demo: body {background-image: url(hintergrundgrafik.gif);
                    background-repeat: no-repeat;
                    background-attachment: fixed; }  
Aufgabe in aufgabe_css03