Propriété CSS background-position

La propriété CSS background-position définit la position de départ d'une image d'arrière-plan à l'intérieur de son élément. Elle contrôle l'endroit où l'image est ancrée — par exemple, dans un coin, centrée, ou décalée d'une distance fixe par rapport à un bord.

Cette page couvre les syntaxes par mot-clé, pourcentage et longueur, la différence importante entre la façon dont les pourcentages et les longueurs sont mesurés, les décalages relatifs aux bords (la syntaxe à quatre valeurs), le positionnement de plusieurs images d'arrière-plan, et les erreurs les plus courantes.

Par défaut, la valeur est 0% 0%, ce qui place l'image dans le coin supérieur gauche de l'élément. Si l'arrière-plan est défini avec repeat, il se répète en mosaïque depuis ce point d'ancrage, à la fois horizontalement et verticalement.

Valeur initiale	0% 0%
S'applique à	Tous les éléments. S'applique également à ::first-letter et ::first-line.
Hérité	Non.
Animable	Oui. La position peut être modifiée.
Version	CSS1
Syntaxe DOM	object.style.backgroundPosition = "center";

Syntaxe

Syntaxe de la propriété CSS background-position

background-position: value;

Vous pouvez fournir une ou deux valeurs :

/* One value — the second axis defaults to center */
background-position: right;        /* same as: right center */

/* Two values — horizontal first, then vertical */
background-position: left top;
background-position: 50% 25%;
background-position: 20px 100px;

/* Four values — offset from a named edge */
background-position: right 20px bottom 10px;

Pourcentages vs. longueurs

C'est le détail qui déroute le plus souvent. Un pourcentage aligne le même point de pourcentage de l'image avec ce point du conteneur, tandis qu'une longueur (px, em, etc.) mesure l'écart entre les coins supérieurs gauches.

background-position: 100% 100% place le coin inférieur droit de l'image contre le coin inférieur droit du conteneur — l'image entière reste visible.
background-position: 50% 50% (identique à center center) centre l'image quelle que soit sa taille.
background-position: 20px 0 décale simplement l'image de 20px vers la droite du coin supérieur gauche ; le décalage est indépendant de la taille de l'image.

Ainsi, les pourcentages sont les mieux adaptés pour « ancrer sur un bord ou centrer » et les longueurs sont les mieux adaptées pour « décaler d'une quantité fixe ».

Exemple de la propriété background-position :

Exemple de la propriété CSS background-position avec la valeur par défaut

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>Background-position property example</h2>
    <p>The background-image is positioned at the left-top corner of the element.</p>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété background-position spécifiée en pourcentage :

Exemple de la propriété CSS background-position avec % (pourcentage)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>Background-position property example</h2>
    <p>
      The background-image is positioned 50% from the left side and 15% from the top side of the element.
    </p>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété background-position en pixels :

Exemple de la propriété CSS background-position avec px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 100px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-attachment: fixed;
        background-position: 5px 50px;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>
      The background-image is positioned 5px from the left, and 50px down from the top.
    </p>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété background-position avec la valeur "right 100px" :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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: right 100px;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned 100px from the right edge, vertically centered.</p>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété background-position avec la valeur "center center" :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 102px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-attachment: fixed;
        background-position: center center;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned center.</p>
  </body>
</html>

Essayez vous-même »

Décalage depuis un bord spécifique

La syntaxe à trois et quatre valeurs vous permet de décaler l'image depuis un bord nommé plutôt que depuis le coin supérieur gauche. Chaque longueur suit le mot-clé qui désigne le bord à partir duquel elle est mesurée :

/* 30px in from the right edge, 10px down from the top edge */
background-position: right 30px top 10px;

C'est bien plus clair que d'essayer d'exprimer la même chose avec des pourcentages, et cela maintient le décalage constant même si le conteneur est redimensionné. Cela est pris en charge par tous les navigateurs modernes (et Internet Explorer 9+).

Positionnement de plusieurs images d'arrière-plan

Lorsqu'un élément possède plusieurs images d'arrière-plan, donnez à chacune sa propre position dans une liste séparée par des virgules. L'ordre des positions correspond à l'ordre des images :

.banner {
  background-image: url("logo.png"), url("pattern.png");
  background-repeat: no-repeat, repeat;
  background-position: right top, left top;
}

Ici, le logo se trouve dans le coin supérieur droit tandis que le motif répété commence en haut à gauche.

Erreurs courantes

Mauvais ordre des axes. La première valeur est toujours horizontale, la seconde verticale — background-position: 30px 80px signifie 30px depuis la gauche, pas depuis le haut.
Oublier background-repeat: no-repeat. Si l'image se répète en mosaïque, la position ne définit que le point de départ de la première tuile, donc l'effet est souvent invisible.
Confondre les pourcentages et les longueurs. 50% centre l'image ; 50px est un décalage fixe depuis le coin (voir la section ci-dessus).
Mélanger les unités dans une paire de valeurs est correct — background-position: center 20px est valide et utile.

Propriétés associées

background-image — définit l'image positionnée.
background-repeat — contrôle la répétition en mosaïque, qui interagit avec le point d'ancrage.
background-size — la mise à l'échelle de l'image modifie la résolution des positions en pourcentage.
background-attachment — détermine si l'image défile avec la page ou reste fixe.
background-color — la couleur de repli affichée là où l'image ne couvre pas.

Valeurs

Valeur	Description	Essayer
`left`, `center`, `right`, `top`, `bottom`	Définit la position de l'image d'arrière-plan. Si une seule valeur est définie, l'autre prend par défaut la valeur `center`.	Essayer »
`x% y%`	La première valeur définit la position horizontale et la seconde la position verticale. `0% 0%` est le coin supérieur gauche. `100% 100%` est le coin inférieur droit. Si une seule valeur est définie, l'autre prend par défaut `50%`.	Essayer »
`xpos ypos`	La première valeur définit la position horizontale et la seconde la position verticale. Les unités peuvent être des pixels (par ex. `0px 0px`).	Essayer »
`initial`	Définit la propriété à sa valeur par défaut.	Essayer »
`inherit`	Hérite la propriété de son élément parent.

Pratique

Quels paramètres peuvent être utilisés dans la propriété CSS background-position pour spécifier la position de l'image d'arrière-plan ?

PourcentagePixelRemMots-clés (top, bottom, left, right, center)Valeurs de couleur (hex, rgba, etc.)