Hintergrundfarben oder -bilder können, so will es die CSS2-Empfehlung, jedem Element einer HTML- oder XHTML-Seite zugeordnet werden. Der farbige oder bebilderte Bereich umfaßt jeweils den vom Elementeinhalt beanspruchten Platz zuzüglich seiner paddings aber ohne seine margins. Ob das dann nach etwas aussieht, ist keine Frage der CSS-Empfehlung. Deshalb ...
| CSS-Attribut | Bedeutung | Code-Beispiel |
|---|---|---|
| background | Ermöglicht gesammelte Angaben zu background-color, background-image, background-repeat, background-attachment, background-position, also alle möglichen Angaben zu Hintergrundfarbe und Hintergrundbild. | <td> ist hier mit style="background:#7cf url(bilder/feet.gif) repeat-y" verschönert worden |
| background-attachment | Legt fest, ob ein Hintergrundbild im Browserfenster festliegt oder mit Text, BIldern Tbaellen etc. scrollt. Mögliche Werte demgemäß: scroll und fixed | Auf dieser Seite ist der über <body> verschüttete Grießbrei im body-Tag fixiert worden. Zu erkennen ist das erst, wenn man die Seite scrollt und mit benachbarten vergleicht. Richtigen Sinn ergibt das erst, wenn der Hintergrung etwa eine bildliche Darstellung, ein Logo oder dergl. enthält, das beim üblichen Scrollen mehrfach erscheinen müßte. Leider ist die hiesige Tabelle nicht so lang, daß das Scrollen bei jeder Bildschirmauflösung auch möglich wird. Ggf. bitte das Browserfenster verkleinern, bis man scrollen kann! |
| background-color | Farbangabe, sollte auch dann vergeben werden, wenn ein Hintergrundbild verwendet wird, weil letzteres ja vom Nutzer abgewählt werden kann. | <td style="background-color:#0000ff;color=#ff0"> <span style="background-color:#f00;color:#0ff"> |
| background-image | Hintergrundbild eines Elements. Es wird der Dateiname des Bildes angegeben (relativ oder absolut adressiert). ACHTUNG! Böse Falle: Die Bilddatei muß, wenn relativ adressiert, auf den Speicherort der CSS-Datei bezogen werden. Alternativ kann auch none angegeben werden. Es ist die Wiederholung voreingestellt. (Vgl. background-repeat, weiter unten) . | <td style="background:url(bilder/back10.gif)"> |
| background-position | Anfangsposition eines Hintergrundbildes bezogen auf den aktiven Container, hier also die Tabellenzelle. Es gibt alternative Möglichkeiten der Positionsbestimmung. 1. Angaben mit zwei Zahlenwerten für seitliche und Höhen-Verschiebung. Diese Verschiebungen beschreiben den Abstand der linken, oberen Ecken von Container und Bild. Die Angabe: 100% 100% verschiebt das Bild in die rechte untere Ecke des Containers. 2. Es sind zur horizontalen Ausrichtung left, center, right bzw.zur vertikalen top, center, bottom zulässig. Erforderlich sind dann jeweils beide Angaben, die Reihenfolge ist gleich. 3. Wenn nur eine Angabe erfolgt, wird die fehlende als center ( 50%) interpretiert. 4. Angaben mit Schlüsselwort (wie 2) und Prozentangabe können gemischt werden. Erlaubt: "30% top" | Hier ist eingestellt: background-position:center. Der style-Eintrag zu <td> lautet: style="background:url(bilder/back10.gif) center no-repeat" |
| background-repeat | Einstellung des Wiederholungsverhaltens, zulässig sind: repeat, repeat-x, repeat-y, no-repeat. Voreingestellt ist repeat. | background-repeat:repeat-x |