background-position

La propriété background-position permet de définir la position initiale, relative à l'origine définie par background-origin pour chaque image d'arrière-plan.

/* Valeurs utilisant un mot-clé */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* Valeurs proportionnelles à la boîte */
/* Type <percentage>                   */
background-position: 25% 75%;

/* Valeurs de longueur */
/* Type <length>       */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Plusieurs valeurs pour plusieurs arrières-plans */
background-position: 0 0, center;

/* Valeurs globales */
background-position: inherit;
background-position: initial;
background-position: unset;

<div class="container">

  <div class="subcontainer" style="background-position: top;">top</div>
  <div class="subcontainer" style="background-position: left;">left</div>
  <div class="subcontainer" style="background-position: 2em;">2em</div>
  <div class="subcontainer" style="background-position: 75%">75%</div>
  
</div>

<div class="container">

  <div class="subcontainer" style="background-position: bottom left;">bottom left</div>
  <div class="subcontainer" style="background-position: right 25%;">right 25%</div>
  <div class="subcontainer" style="background-position: 4em 2em;">4em 2em</div>
  <div class="subcontainer" style="background-position: 3em 75%">3em 75%</div>

</div>

<div class="container">

  <div class="subcontainer" style="background-position: bottom 10px right 30px;">bottom 10px right 30px</div>
  <div class="subcontainer" style="background-position: right 3em top 10px;">right 3em top 10px</div>
  <div class="subcontainer" style="background-position: bottom 20px right;">bottom 20px right</div>
  <div class="subcontainer" style="background-position: top right 3em;">top right 3em</div>

</div>

.container {
  display: flex;
  height: 150px;
  justify-content: space-around;
  margin: 0.2em;
}

.subcontainer {
  width: 150px;
  margin: 2px;
  padding: 5px;
  font-family: monospace;
  border: solid #112382;
  background-color: #E5E8FC;
  background-image: url("https://mdn.mozillademos.org/files/15193/star.png");
  background-repeat: no-repeat;
}

Syntaxe

La propriété background-position peut être définie grâce à une ou plusieurs valeurs <position>, séparées par des virgules.

Valeurs

<position>

Une valeur <position>. Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs.

Définition avec une valeur : la valeur peut être :

• Le mot-clé center qui centre l'image.
• Un mot-clé parmi top, left, bottom, right. Ce mot-clé indique le bord par rapport auquel placer l'élément. Pour l'autre dimension, on utilisera la moitié de la boîte (50%).
• Une longeur (<length>) ou un pourcentage (<percentage>). Cette valeur définit l'abscisse du point par rapport au bord gauche. L'ordonnée est fixée à 50%.

Définition avec deux valeurs : la première valeur définit l'abscisse (la coordonnée horizontale X) et la seconde définit l'ordonnée (la coordonnée verticale Y). Chaque valeur peut être :

• Un des mots-clés parmi top, left, bottom, right. Si left ou right est utilisé, la valeur définit l'abscisse et l'autre définira l'ordonnée. Si top ou bottom est indiqué, cette valeur définira l'ordonnée et l'autre valeur définira X.
• Une valeur de longueur (<length>) ou un pourcentage (<percentage>). Si l'autre valeur vaut left ou right, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est top ou bottom,  cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée.

On notera que :

• si une valeur est top ou bottom, la seconde ne peut pas être top ou bottom.
• si une valeur est left ou right, la seconde ne peut pas être left ou right.

Autrement dit "top top" ou "left right" seront considérées comme invalides.

Syntaxe formelle

<position>#
où 
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
où 
<length-percentage> = <length> | <percentage>

Exemples

Exemples utilisant plusieurs images

Dans cet exemple, on a trois éléments jaunes qui ont chacun une étoile située différemment. Le rectangle final possède deux images d'arrière-plan, chacune à une position différente.

CSS

div {
  background-color: #FFEE99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/* On utilise la propriété raccourcie background */
.exemple_un {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
}
.exemple_deux {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
}

/*
Plusieurs images d'arrière-plan chacune positionnée
différemment, on voit les virgules dans les déclarations.
L'ordre est le même entre background-image et -position.
*/
.exemple_trois {
  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), 
                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-position: 0px 0px,
                       center;
}

HTML

<div class="exemple_un">Premier exemple</div>
<div class="exemple_deux">Deuxième exemple</div>
<div class="exemple_trois">Troisième exemple</div>

Résultat

Spécifications

Compatibilité des navigateurs

Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub https://github.com/mdn/browser-compat-data, n'hésitez pas à contribuer en proposant vos pull request.

Notes relatives à Quantum CSS

• Un bug de Gecko empêche la transition de background-position entre deux valeurs qui contiennent différents nombres de valeurs <position> (par exemple background-position: 10px 10px; d'une part et background-position: 20px 20px, 30px 30px; d'autre part) (cf. bug 1390446). Le nouveau moteur CSS de Firefox (appelé Quantum CSS ou Stylo, prévu pour Firefox 57) corrige ce problème.

Voir aussi

• Gérer plusieurs arrières-plans