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>

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>

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>

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.

Support de Navigateurs

4.0+ 49.0+ 3.1+ 15.0+


Trouvez-vous cela utile?

Articles Associées