Propriété CSS background-position

La propriété CSS background-position spécifie où doit être la position de début de background-image.

Si la valeur initiale est définie, background-position sera placé au coin supérieur-gauche d'un élément. Et si vous définissez l'arrière plane à être répété, il sera répété verticalement et horizontalement à la fois.

Valeur initiale	0% 0%
Appliquée à	Tous les éléments. Elle est aussi appliquée à ::first-letter et ::first-line.
Héritée	Non.
Animable	Oui. La position peut être changé.
Version	CSS1
Syntaxe DOM	object.style.backgroundPosition = "center";

Syntaxe

background-position: value;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body { 
      padding: 102px;
      background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: left top; 
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background-position</h2>
    <p>La background-image est positionnée au coin supérieur-gauche de l'élément.</p>
  </body>
</html>

Essayez-vous-même!

Dans cet exemple vous pouvez voir comment définir la propriété background-position à l'aide des %s.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body { 
      background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 50% 15%; 
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background-position</h2>
    <p>La background-image est positionné 50% du gauche et 15% du côté supérieur de l'élément.</p>
  </body>
</html>

Essayez-vous-même!

Voici comment définir la propriété background-position à l'aide des pixels.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body { 
      padding: 100px;
      background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 5px 50px; 
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background-position</h2>
    <p>La background-image est positionné 5px du gauche, et 50px vers le bas de l'haut.</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
left right top top bottom center	Définit la position de la propriété background-image. Si on ne définit qu'une valeur, l'autre sera "center".
x% y%	La première valeur définit la position horizontale, quand la deuxième définit la verticale. 0% 0% est le coin supérieur gauche. 100% 100% est le coin inférieur droit. Si ne définir qu'une valeur, l'autre sera 50%. 0% 0% est la valeur initiale.
xpos, ypos	la première valeur définit la positon horizontale, quand la deuxième définit la verticale. Les unités peuvent être les pixels (0px 0px).
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.