Hier bist Du: Home « Hintergrundbilder « background-position

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

Darstellung des Bezugspunktes für den Wert padding 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
Wert Internet Explorer Opera Netscape Mozilla/ Seamonkey Mozilla Firefox Safari Konqueror
5 5.5 6 MAC 5+ 5 6 7+ 4 6 7+ 1+ 0.8+ 1.0+ 3.3+
left, right, center j j j j j j j n j j j j j j
top, bottom, center j j j j j j j n j j j j j j
Längenangabe,Prozentangabe j j j j j j j n j j j j j j
Negative Werte j j j j j j j n j j j j j j
Angabe von nur einem Wert j j j j j j j n j j j j j j
Kombinationen:
Längenangabe Längenangabe
Prozentangabe Längenangabe
Längenangabe Prozentangabe
Schlüsselwort Schlüsselwort
j j j j j j j n j j j j j j
Kombinationen:
Schlüsselwort Längenangabe
Schlüsselwort Prozentangabe
j j j j n n n n n n n n j j