CSS-Hintergrund (Background)

Weiter unten wird jede einzelne erläutert:

background-color

Die background-color-Eigenschaft definiert die Farbe des Hintergrunds.

CSS-Statement	Ausgabe
p {background-color: 00FF00;}	Grüner Hintergrund
p {background-color: red;}	Roter Hintergrund

background-image

Die background-image-Eigenschaft gibt an, welches Hintergrundbild benutzt werden soll.

CSS-Statement	Ausgabe
p {background-image:url(yp.jpg);}	Mit Hintergrundbild

background-repeat

Die background-repeat-Eigenschaft gibt an, ob ein kleines Hintergrundbild wiederholt dargestellt werden soll. Die Vorgabe ist "repeat", dies bedeutet, dass das Bild in x- und y-Richtungen wiederholt wird. Sie können auch manuell x-repeat, y-repeat, oder no-repeat bestimmen.

Beispiele:

CSS-Statement	Ausgabe
p {   background-image:url(yp.jpg);   background-repeat: no-repeat; }	Hintergrundbild wiederholt sich nicht.
p {   background-image:url(yp.jpg);   background-repeat: repeat-x; }	Hintergrundbild wiederholt sich horizontal.
p {   background-image:url(yp.jpg);   background-repeat: repeat-y; }	Hintergrundbild wiederholt sich vertikal.
p {   background-image:url(yp.jpg);   background-repeat: repeat; }	Hintergrundbild wiederholt sich in beide Richtungen.

background-attachment

Die background-attachment-Eigenschaft gibt an, ob ein Hintergrundbild fest auf dem Bildschirm positioniert sein soll. Mögliche Werte sind „fixed” (Hintergrundbild bleibt beim Bildlauf in der gleichen Position ) und „scroll“ (Hintergrundbild bewegt sich mit dem Rest des Inhalts beim Scrolling).

Hier sind zwei Beispiele:

body {background-attachment: fixed;   background-image: url("yp.jpg");   background-repeat: no-repeat; }	body {background-attachment: scroll;   background-image: url("yp.jpg");   background-repeat: no-repeat; }

background-position

Die background-position-Eigenschaft definiert die Position des Hintergrunds. Mögliche Werte sind.

• Eine Kombination von [top, center, bottom] und [left, center, right].
• Zwei Prozentwerte: Der erste Wert gibt den horizontalen prozentualen Anteil und der zweite gibt den vertikalen prozentualen Anteil an.
• Zwei Positionswerte: Der erste Wert ist die absolute horizontale Position, der zweite ist die absolute vertikale Position.

Beispiele:

body { background-image: url("yp.jpg");   background-repeat: no-repeat;   background-position: center center; }	body { background-image: url("yp.jpg");   background-repeat: no-repeat;   background-position: 20% 20%; }