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>

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>

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>

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.

Support de Navigateurs

1.0+ 1.0+ 1.0+ 3.5+


Trouvez-vous cela utile?

Articles Associées