Tutorial zu CSS2 © 04/2002 webnetline.de & topwebhamster.de
Cascading Style Sheets, level 2
8.Hintergründe
So, wie nur wenige Puristen zwischen nackten Mauern wohnen, so schmücken fast alle Web-Autoren ihre Seiten mit einem Hintergrundmuster oder doch wenigstens einer Hintergrundfarbe.
CSS geht bei den gestalterischen Möglichkeiten allerdings wesentlich
weiter als reines HTML. Hintergründe können nicht nur dem
<body>-Tag oder Tabellen beigefügt
werden, mit Style Sheets können Sie jedem HTML-Tag mit sichtbarem
Inhalt einen Hintergrund verpassen. Jetzt stehen auch feststehende
Hintergrundgrafiken zur Auswahl.
Mit background-color: legen Sie eine Hintergrundfarbe für ein
Element fest. Erlaubt ist eine Farbangabe.
Listing 21:
<style type="text/css">
body { background-color:#003366; }
</style>
Mit background-image:url([Dateiname]):
bestimmen Sie eine Hintergrundgrafik.
Listing 22:
<style type="text/css">
div { background-image:url(back.gif); }
</style>
Per Voreinstellung wird die Hintergrundgrafik als Wallpaper
(Tapetenmuster) wiederholt, so wie man es von der
background=-Eigenschaft des
HTML-Befehls <body> gewohnt ist. Als
Grafikdateitypen sind GIF- oder JPEG-Grafiken geeignet. Ist das
Element, für das die Hintergrundgrafik definiert wird, in der Höhe
oder Breite kleiner als die Hintergrundgrafik selbst, so wird diese
abgeschnitten.
Mit background-repeat: kontrollieren Sie das Wiederholungsverhalten
einer Hintergrundgrafik, die Sie mit background-image einbinden.
Mögliche Werte sind: repeat (=
wiederholen, Voreinstellung), repeat-x
(= nur "eine Zeile lang" waagerecht wiederholen),
repeat-y (= nur "eine Spalte lang"
senkrecht wiederholen), no-repeat (=
nicht wiederholen, nur als Einzelbild anzeigen).
Listing 23:
<style type="text/css">
body { background-image:url(back.gif); background-repeat:no-repeat;
}
</style>
Bei längeren Elementen wandert ein Hintergrundbild beim Scrollen im
Text optisch mit. Sie können jedoch erzwingen, dass der Hintergrund
stehen bleibt. Dies nennt man den Wasserzeichen-Effekt. Mögliche
Werte für background-attachment: sind scroll
(= mitscrollen, Voreinstellung) und fixed
(= Hintergrundbild bleibt stehen).
Listing 24:
<style type="text/css">
body { background-image:url(back.gif); background-attachment:fixed;
}
</style>
Mit background-position: legen Sie fest, wo genau die
Hintergrundgrafik innerhalb des HTML-Elements platziert werden soll.
Listing 25:
<style type="text/css">
body { background-image:url(back.gif); background-position:1cm 1cm;
}
</style>
Diese Angabe ist vor allem dann interessant, wenn Sie mit
background-repeat: erzwingen, dass eine Hintergrundgrafik nur einmal
angezeigt wird. Bezugspunkt ist das HTML-Element, für das die
Hintergrundgrafik definiert wird. Zulässig sind entweder zwei
numerische Werte, der erste für den Abstand von links und der zweite
für den Abstand von oben. Oder eine sinnvolle Kombination der
folgenden Angaben: top (= vertikal
obenbündig), center (= horizontal
zentriert), middle (= vertikal mittig),
bottom (= vertikal untenbündig),
left (= horizontal linksbündig),
right (= horizontal rechtsbündig).
Listing 26:
<style type="text/css">
body { background:url(back.gif) no-repeat middle center; }
</style>
Die Angaben background-image:, background-repeat:,
background-attachment: und background-position: können Sie auch mit
background: zusammenfassen.
|
bezahlte Bannerwerbung:
|
|
Jörg Jünemann, Berlin / Ralf Roletschek, Eberswalde
