CSS-Eigenschaft background-position-x

Die Eigenschaft background-position-x legt die horizontale Position für jeden Hintergrund fest.

Ein oder mehrere Werte können durch Kommas getrennt angegeben werden.

Negative Werte sind gültig.

Diese Eigenschaft ist experimentell.

Anfangswert	left
Gilt für	Alle Elemente
Geerbt	Nein
Animierbar	Nein
Version	CSS4
DOM Syntax	object.style.backgroundPositionX = "right";

Syntax

background-position-x: left | center | right | length | percentage | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
      background-position-x: 70%; 
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft background-position-x</h2>
  </body>
</html>

Versuch es selber!

Ein anderes Beispiel mit dem Wert "center":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-x;
      background-position-x: center; 
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft background-position-x</h2>
  </body>
</html>

Versuch es selber!

Hier ist background-position-x auf "left" gesetzt:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel  des Dokuments</title>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
      background-position-x: left; 
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft background-position-x</h2>
  </body>
</html>

Versuch es selber!

Werte

Wert	Eigenschaft
left	Es legt die Ausrichtung des linken Randes des Hintergrundbildes mit dem linken Rand der Hintergrundpositionsebene fest.
center	Eszeigt die Ausrichtung der Mitte des Hintergrundbildes mit der Mitte der Hintergrundpositionsschicht an.
right	Es zeigt die Ausrichtung des rechten Randes des Hintergrundbildes mit dem rechten Rand der Hintergrundpositionsebene an.
length	Es zeigt den Offset des linken vertikalen Randes des gegebenen Hintergrundbildes vom linken vertikalen Rand der Hintergrundpositionsschicht an.
percentage	Es zeigt den Offset der horizontalen Position des Hintergrundbildes in Bezug auf den Container an. 0% richtet den linken Rand des Hintergrundbildes mit dem linken Rand des Containers aus, und 100% richtet den rechten Rand des Hintergrundbildes mit dem rechten Rand des Containers aus, und 50% zentriert das Hintergrundbild horizontal.
initial	Es setzt die Eigenschaft auf den Standardwert.
inherit	Es erbt die Eigenschaft von ihrem übergeordneten Element.