Propriété CSS background-position-x

La propriété background-position-x définit la position horizontale pour chaque arrière-plan.

Une ou plusieurs valeurs peuvent être spécifiées séparées par virgules.

Valeurs négatives sont valides.

Cette propriété est expérimentale.

Valeur initiale	left
Appliquée à	Tous les éléments.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.backgroundPositionX = "right";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
      background-position-x: 70%; 
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background-position-x</h2>
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec la valeur "center":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-x;
      background-position-x: center; 
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background-position-x</h2>
  </body>
</html>

Essayez-vous-même!

Ici la propriété background-position-x est définie à "left":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
      background-position-x: left; 
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background-position-x</h2>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
left	Spécifie l'alignement du bord gauche de l'image de l'arrière-plan avec le bord gauche de la zone dédiée à l'arrière-plan.
center	Spécifie l'alignement de l'image de l'arrière-plan avec la zone dédiée à l'arrière-plan.
right	Spécifie l'alignement du bord droit de l'image de l'arrière-plan avec le bord droit de la zone dédiée à l'arrière-plan.
length	Spécifie le décalage vertical de l'arrière-plan correspondant par rapport à un bord vertical de la zone d'arrière-plan.
percentage	Définit le décalage horizontal de l'arrière-plan correspondant par rapport au conteneur. 0% aligne le bord gauche de l'image de l'arrière-plan avec le bord gauche du conteneur, et 100% aligne le bord droit de l'image de l'arrière-plan avec le bord droit du conteneur et 50% centre horizontalement l'image de l'arrière-plan.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.