Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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.

Note : Cette propriété est une propriété détaillée, rattachée à la propriété raccourcie background. Aussi, si on utilise la propriété raccourcie après une déclaration pour background-position, cette dernière sera réinitialisée avec sa valeur initiale si elle n'est pas redéfinie dans la propriété raccourcie.

Valeur initiale0% 0%
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Pourcentagesse rapporte à la taille de la zone de positionnement de l'arrière-plan, moins la taille de l'image; la taille se rapporte à la largeur pour les décalages horizontaux et à la hauteur pour les décalages verticaux
Médiavisuel
Valeur calculéeune liste dont chaque élément consiste en deux mots-clé représentant l'origine et deux offsets depuis cette origine, chacun étant une longueur absolue (si spécifié comme une length), ou un pourcentage
Animableoui, comme une liste répétable de , une simple liste de , une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* 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: 0px 0px;
background-position: 1cm 2cm;
background-position: 10ch 8em;

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

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

Valeurs

<position>
Une <position>, c'est-à-dire une à quatre valeurs permettant de définir une position par rapport aux bords de la boîte de l'élément. On peut fournir des décalages absolus ou relatifs. On notera que la position ainsi définie peut être en dehors de la boîte de l'élément.

Syntaxe formelle

<position>#

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

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'background-position' dans cette spécification.
Candidat au statut de recommandation La gestion de plusieurs arrières-plans a été ajoutée. La syntaxe avec quatre valeurs a été ajoutée. La définition des valeurs en pourcentages a été modifiée pour correspondre aux implémentations.
CSS Level 2 (Revision 1)
La définition de 'background-position' dans cette spécification.
Recommendation Cette spécification permet de mélanger les valeurs qui sont des mots-clés, les valeurs de type <length> et <percentage>.
CSS Level 1
La définition de 'background-position' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) 4.0 3.5 1.0 (85)
Gestion de plusieurs arrières-plans 1.0 3.6 (1.9.2) 9.0 10.5 1.3 (312)
Syntaxe avec quatre valeurs (pour les écarts depuis chaque coté) 25 13.0 (13.0) 9.0 10.5 7.0
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) 1.0 (1) (Oui) (Oui) (Oui)
Gestion de plusieurs arrières-plans ? 1.0 (1.9.2) ? ? ?
Syntaxe avec quatre valeurs (pour les écarts depuis chaque coté) Pas de support 13.0 (13.0) ? ? 7.0

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Goofy, mrstork, teoli, enogael, FredB, tregagnon, Mgjbot, Kyodev, Fredchat
 Dernière mise à jour par : SphinxKnight,