Hintergrund
(Auszug aus "E-Books mit ePUB ─ Von Word zum E-Book mit XML" von Dr. Victor Wang)
In der folgenden Tabelle sind die wichtigesten CSS-Eigenschaften für den Hintergrund aufgeführt sowie deren mögliche Werte mit jeweils einem Beispiel.
background-image | Hintergrundbild Definition einer Hintergrundgrafik. Abhängig von der Größe der Grafik wird sie automatisch wiederholt (falls es sich um eine kleine Grafik handelt) oder nur teilweise angezeigt. |
Werte | <URI> | none | inherit |
Beispiel | background-image: url(http://www.it-fachportal.de/logo.gif); |
background-color | Hintergrundfarbe Definiert die Hintergrundfarbe des Elements. Farben können als RGB-Zahlwerte oder mittels der 16 Farbnamen angegeben werden. |
Werte | <Farbe> | transparent | inherit |
Beispiel | background-color: silver; |
background | Hintergrundformatierung Kompakte Angabe der background-Eigenschaften (background-color, background-image, background-repeat, background-attachment, background-position) |
Werte | [background-color || background-image || background-repeat || background-attachment || background-position] | inherit |
Beispiel | background: #2277bb; |
background-position | Position des Hintergrundbildes Nur in Kombination mit background-image. Mit dieser Eigenschaft kann zusätzlich die Position des Hintergrundbildes anhand der linken oberen Ecke definiert werden. Mögliche Werte sind numerische oder die folgenden Angaben: 1) top: vertikal obenbündig 2) bottom: vertikal untenbündig 3) center: zentriert 4) left: horizontal linksbündig 5) right: horizontal rechtsbündig |
Werte | [ [ <Prozent> | <Länge> | left | center | right ] [ <Prozent> | <Länge> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit |
Beispiel | background-image: url(logo.jpg) background-position: top left; |
background-attachment | Wasserzeichen-Effekt Hinterlegt eine Hintergrundgrafik, die eine Wasserzeichen-ähnliche Funktion haben kann. Beim Wert fixed bleibt die Grafik an ihrer Position stehen; beim Wert scroll scrollt die Grafik mit den Inhalten. |
Werte | scroll | fixed | inherit |
Beispiel | background-image: url(logo.jpg); |
background-repeat | Wiederholung des Hintergrundbildes Nur in Kombination mit background-image. Diese Eigenschaft gibt an, wie oft eine Hintergrundgrafik wiederholt werden soll. Zulässige Werte sind: 1) repeat: unendliche Wiederholung 2) repeat-x: Wiederholung nur waagerecht 3) repeat-y: Wiederholung nur senkrecht 4) no-repeat: keine Wiederholung |
Werte | repeat | repeat-x | repeat-y | no-repeat | inherit |
Beispiel | background-image: url(bild.jpg) backgroundrepeat: repeat; |
<< zurück | vor >> |
Tipp der data2type-Redaktion: Zum Thema ePub bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © mitp 2011
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "E-Books mit ePUB" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
Verlagsgruppe Hüthig Jehle Rehm GmbH, Im Weiher 10, 69121 Heidelberg, kundenbetreuung(at)hjr-verlag.de