61.
Hintergrundformatierung mit Background (03.09.2001)
Bereits in der CSS1-Spezifikation existieren einige Eigenschaften zur Hintergrundformatierung. Man betrachte das folgende Beispiel für den BODY eines HTML-Dokuments:
BODY
{
/*(1)*/ Background-Color: #FFFFCC;
/*(2)*/ Background-Image: url(styleassistant.gif);
/*(3)*/ Background-Repeat: no-repeat;
/*(4)*/ Background-Position: bottom right;
/*(5)*/ Background-Attachment: fixed;
}
Definiert werden die Hintergrundfarbe (1), ein Hintergrundbild (2), dessen Verhalten bezüglich Wiederholung (3) und Positionierung (4) sowie beim Scrollen des Dokuments (5). Farbwerte werden in der üblichen Hexadezimal-, RGB- oder Prozentwert-Notation
angegeben und Bilddateinamen stehen in den Klammern von url().
Hintergrundbilder können sowohl in x- als auch in y-Richtung wiederholt werden (repeat) bzw. nur in einer Richtung (repeat-x oder repeat-y). Keine Bildwiederholung wird mit no-repeat vorgeschlagen.
Die Positionierung erfolgt durch Angabe von Kombinationen aus top, right, bottom, left und center. Im Beispiel wird das Hintergrundbild unten rechts angeordnet
(bottom right). Mit der letzten Angabe kann Einfluss auf die Bildbewegung beim Scrollen des Dokuments genommen werden.
Dabei sind die Werte fixed (das Bild bleibt an seinem Platz) und scroll (das Bild bewegt sich mit dem Dokument) möglich.
Wesentlich praktischer ist die Verwendung der Kombinationseigenschaft Background, der die genannten Werte in beliebiger Reihenfolge übergeben werden können. Das obige Beispiel kann auch so formuliert werden:
BODY
{
Background: #FFFFCC url(styleassistant.gif) bottom right fixed no-repeat;
}
|