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