Hintergrundbilder

Jedes HTML-Element kann per CSS ein Hintergrundbild erhalten, wodurch die unterschiedlichsten Effekte erreicht werden können. Hier ist einfach Kreativität gefragt...

Syntaxbeispiele:

background: #192F56 url(pics/higrubild.jpg) repeat-y top left;
background: #192F56 url(pics/higrubild.jpg) no-repeat 20px 50px;

Die CSS-Eigenschaft background kann also mehrere Werte aufnehmen:

Siehe auch SelfHTML zum Thema Hintergrundbilder.

Die CSS-Regeln für diese Beispiele stehen im Head der Datei. Bitte sehen Sie sich dazu den Quellcode an.

Beispiel 1:

Dieser Bereich erhält eine Hintergrundgrafik mit einem Farbverlauf, welcher von Dunkelgrau bis Mittelgrau reicht. Die Hintergrundfarbe dieses Bereiches ist identisch mit dem äußersten rechten Farbwert der Grafik. Somit entsteht der Eindruck, die Grafik würde den kompletten Bereich ausfüllen, dabei reicht sie nur bis zur Mitte.

Standardmäßig werden Hintergrundbilder gekachelt dargestellt, d.h. sie werden in beide Richtungen so lange wiederholt, bis der Platz ausgefüllt ist. Durch repeat-y wird erreicht, dass die Grafik nur in der Vertikalen wiederholt wird, was bei einem horizontalen Farbverlauf dann nicht weiter auffällt. Die Grafik in diesem Beispiel ist nur 5 Pixel hoch und 300 Pixel breit.

Beispiel 2:

So sähe es aus, würde die Grafik normal gekachelt. Der Internet Explorer 6 kommt übrigens irgendwie gar nicht mit diese Seite zurecht, bitte verwenden Sie einen standardkonformen Browser (z.B. Firefox).

Beispiel 3:

So etwas sollte man natürlich tunlichst vermeiden!

Nicht nur, dass das Bild für einen Hintergrund viel zu aufdringlich und auch noch animiert ist, es sieht gekachelt einfach nur blöd aus. Ausserdem erschwert es die Lesbarkeit des Textes. Also bitte auch keine animierten pinkelnden Hunde als Hintergrund! Zuviel Gezappel auf der Seite sieht auch ganz allgemein wenig professionell aus. Und bitte erst recht keine großformatigen Schnappschuß-Fotos vom letzten Urlaub!

Beispiel 4:

Hintergrundbilder können auch rechtsbündig angeordnet werden. Hier habe ich entsprechend dem linken Farbwert der Grafik die allgemeine Hintergrundfarbe angepasst.

Beispiel 5:

Ebenso ist es möglich, das Hintergrundbild nur einmal anzeigen zu lassen und seine Position zu bestimmen. Das rechte margin wurde hier von 10 auf 100 erhöht, damit der Text nicht über der Kiste liegt. Hintergründe können also auch den Charakter eines richtigen Bildes haben.

Meine Hinweiskisten funktionieren übrigens genauso. Sie sind lediglich Absätze, die zur Klasse "hinweiskiste" gehören, welche entsprechende Anweisungen definiert.

Beispiel 6:

Im allgmeinen eignen sich jedoch dezente Grafiken besser, welche wie ein Wasserzeichen erscheinen. Je nach Anwendungsfall. Ferner sollten von der Philosophie her Hintergrundbilder keine inhaltliche Relevanz haben, sondern nur schmückendes Beiwerk sein, welches jederzeit per CSS ausgetauscht werden darf.

In CSS 3 soll übrigens festgelegt werden, dass ein Element mehrere Hintergrundbilder erhalten kann, aber das kann noch einige Jahre dauern, bis alle Browser das unterstützen...