wie Elternelement).
Weitere Hinweise
    Hintergrund- und Vordergrundfarben sollten – außer für spezielle Effekte – stets gut kontrastieren. Wenn Sie Hintergrundfarben verwenden, ist es deshalb grundsätzlich einegute Idee, explizit passende Vordergrundfarben zu definieren. Das obige Beispiel macht davon Gebrauch.
    Wenn Ihnen der Abstand zwischen Textgrenzen und dem Farbblock, der durch die Hintergrundfarbe entsteht, zu klein ist, können Sie wie im obigen Beispiel mit
padding
einen Innenabstand definieren.
Referenzinformationen
    CSS-Eigenschaften
background-color
:

14.7.2    Hintergrundgrafiken
    Sie können für beliebige HTML-Elemente mit sichtbarem Erstreckungsraum ein eigenes Hintergrundbild definieren. Dazu gibt es folgendes Ensemble von CSS-Eigenschaften:
•   
background-image
referenziert die Hintergrundgrafik,
•   
background-repeat
ermöglicht Wiederholungseffekte für Muster (Wallpaper),
•   
background-attachment
erlaubt die Fixierung von Hintergrundgrafiken, so dass diese nicht mit scrollen,
•   
background-position
bestimmt die Position der Hintergrundgrafik innerhalb des Erstreckungsraums des Elements.
    All diese Eigenschaften sind übrigens gemeinsam mit der zuvor beschriebenen Eigenschaft
background-color
in der zusammenfassenden Eigenschaft
background
kombinierbar.
    Hintergrundgrafiken lassen sich mit sehr unterschiedlicher Wirkung einsetzen. Das nachfolgende Beispiel versucht, einige Aspekte davon aufzuzeigen.
Beispiel
    
    
    
    
    
    
    
    
    
    

Neues

    

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    sed diam nonumy eirmod tempor invidunt ut labore et
    dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et earebum. Stet
    clita kasd gubergren, no sea takimata sanctus est Lorem
    ipsum dolor sit amet.
    

    
    
    Bild 14.22: Das Hintergrundgrafik-Beispiel im Browser
Erläuterung
    Zum besseren Verständnis noch die oben verwendeten Grafiken:
    Bild 14.23: Die Hintergrundgrafik des body-Elements im Beispiel
    Bild 14.24: Die Hintergrundgrafik des nav-Elements im Beispiel
    Mit
background-image:
url(URL-Adresse);
können Sie eine Hintergrundgrafik bestimmen. Die Grafik kann von einer beliebigen eigenen oder fremden Quelle stammen. Es gelten alle Regeln und Möglichkeiten der Referenzierung, wie in 2.1.5 Referenzierung beschrieben.
    Per Voreinstellung wird eine Hintergrundgrafik wie ein Wallpaper (Tapetenmuster) wiederholt. Das ist bei einigen Grafiken erwünscht, so wie im obigen Beispiel im
nav
-Element. Die Hintergrundgrafik für das
body
-Element wird im Beispiel ebenfalls wiederholt – aber nur vertikal in einem Streifen rechts. Dies wird durch Angaben zu
background-repeat
und
background-position
erreicht.
    Bei
background-repeat
wird im obigen Beispiel mit
repeat-y
erreicht, dass die Hintergrundgrafik nur eine »Spalte« lang vertikal wiederholt wird. Das Gegenstück,
repeat-x
, bewirkt die Wiederholung nur eine »Zeile« lang. Ebenfalls wichtig ist die Wertzuweisung
no-repeat
. Diesen Wert müssen Sie dann zuweisen, wenn die Hintergrundgrafik nur einmal angezeigt und nicht wiederholt wird. Standardwert ist der Wert
repeat
(zeilen- und spaltenweise endlos wiederholen = Tapeteneffekt).
    Normalerweise würde
background-repeat:
repeat-y
bewirken, dass die Grafik links eine Spalte lang wiederholt wird. Dass sie wie im obigen Beispiel am rechten Rand wiederholt wird, liegt an der Angabe
background-position:
right;
. Mit
background-position
können Sie die Hintergrundgrafik ausrichten bzw. positionieren. Sinnvoll ist diese Angabe allerdings nur in Verbindung mit
background-repeat
und dort einem anderen Wert als
repeat
.
    Bei
background-position
können Sie neben
right
eines der Schlüsselwörter
left
(linksbündig),
top
(oben