Hintergrund positionieren: `background-position`

Beispiel

background-position legt abhängig von background-repeat Position eines Hintergrundbildes fest:
background-repeat:no-repeat: Das Hintergrundbild wird nur einmal and der angegebenen Position angezeigt.
background-repeat:repeat-x: Das Hintergrundbild wird horizontal wiederholt angezeigt und nur der zweite Wert wird verwendet, um die Hintergrundbilder vertikal zu verschieben.
background-repeat:repeat-y: Das Hintergrundbild wird vertikal wiederholt angezeigt und nur der erste Wert wird verwendet, um die Hintergrundbilder horizontal zu verschieben.

<style type="text/css">
 body
 {
  background-image:url(images/bg.gif);
  background-repeat:no-repeat;
  background-position:100px 50%;
 }
</style>
<body>

Seiteninhalt ...

</body>

Initialwert:	0% 0%
Vererbbar:	Nein
Anwendbar auf:	Block-Elemente
Medium:	Visual
Werte:	left Linksbündig. right Rechtsbündig. top Oben. bottom Unten. center Zentriert. center Vertikal in der Mitte. Längenangabe Prozentangabe Inherit Positive und negative Werte sind erlaubt. Wird nur ein Wert angegeben, so legt dieser die horizontale Position fest. Die vertikale Position liegt dann bei 50%. Sind zwei Werte angegeben, so bestimmt der Erste die horizontale und der Zweite die vertikale Position. Längen- Prozentangaben und Schlüsselworten dürfen gemischt werden. Hier die erlaubten Kombinationen: background-position:Längenangabe Längenangabe background-position:Prozentangabe Längenangabe background-position:Längenangabe Prozentangabe background-position:Schlüsselwort Schlüsselwort Die Längenangaben werden vom Rand des padding-Bereichs gemessen, sodass eine Veränderung des Innenabstands die Position der Hintergrundgrafik nicht verschiebt:
Prozentuale Werte:	Beziehen sich auf die Größe der Box, für die `background-position` angegeben ist