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>

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>

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>

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.

Browser-Support

chrome firefox safari opera
4.0+ 49.0+ 3.1+ 15.0+

Übe dein Wissen

Welche Werte kann die CSS-Eigenschaft 'background-position-x' annehmen?
Finden Sie das nützlich?