Background-position - Propriété CSS

Schéma de la syntaxe de background-position.

Description des termes utilisés sur le schéma :

• x et y sont des valeurs numériques suivies d'une des unités de dimension.
• % sont des pourcentages qui se résolvent en une dimension. Ils sont calculés par rapport à la largeur de la zone d'arrière-plan moins la largeur de l'image pour le premier, et la hauteur de la zone d'arrière-plan moins la hauteur de l'image pour le second.
• Le premier groupe de valeur concerne le positionnement horizontal, le deuxième groupe le positionnement vertical.
• Toute la syntaxe peut être répétée autant de fois qu'il y a d'arrière-plans définis, chaque occurrence étant séparée par une virgule.

Description de la propriété background-position.

background-position définit comment se positionne l'arrière-plan par rapport à l'élément. Si l'arrière-plan est répété sur toute la surface, la propriété background-position provoque simplement un décalage du motif. C'est une propriété résumée pour remplacer les propriétés :

Deux valeurs peuvent donc être utilisées avec background-position, la première pour le positionnement horizontal et la deuxième pour le positionnement vertical. Lorsqu'une seule des deux valeurs est indiquée, l'autre est assimilée à center.

Par défaut (si background-position n'est pas utilisée) l'arrière-plan est positionné en haut et à gauche de l'élément.

Reportez-vous à la page sur les arrière-plans pour des explications générales sur les arrière-plans. Et plus bas sur cette page pour des informations sur le positionnement précis de l'arrière-plan.

Valeurs pour background-position.

• background-position: left; background-position: center; background-position: right;

  Ces trois valeurs définissent le positionnement horizontal de l'arrière-plan. Sans indication supplémentaire, le positionnement vertical sera alors fixé à center.

• background-position: top; background-position: center; background-position: bottom;

  Ces trois valeurs définissent le positionnement vertical de l'arrière-plan. Sans indication supplémentaire, le positionnement horizontal sera fixé à center.

• background-position: right top;

  Pour préciser le positionnement de l'arrière-plan dans les deux directions, il faut préciser deux valeurs, séparées par un espace. Tant qu'il s'agit de valeurs prédéfinies, elles peuvent être saisies dans un ordre quelconque : en effet right et left sont sans ambiguïté un positionnement horizontal, tandis que top et bottom correspondent à un positionnement vertical.

• background-position: right 10px bottom 20%;

  Les valeurs vues précédemment peuvent être suivies d'un nombre positif ou négatif, avec une unité de dimension. Voir les unités de dimension ou un pourcentage.
  Les valeurs positives déplacent l'arrière-plan vers le centre de l'élément, tandis que les valeurs négatives le déplacent vers l'extérieur. Voyez les explications plus bas sur cette page au sujet du positionnement précis de l'arrière-plan.

  Dès qu'une valeur numérique est présente, l'ordre de saisie est importante : d'abord le positionnement horizontal, puis le positionnement vertical.

• background-position: 10% 30px

  Deux valeurs numériques, positives ou négatives, avec une unité de dimension, ou deux pourcentages. Elles définissent respectivement le positionnement horizontal et vertical de l'arrière-plan.

  Cette syntaxe est équivalente à left 10% top 30px

• background-position: right top, center top;

  La virgule est utilisée pour séparer les informations concernant des arrière-plans différents. Reportez-vous à nos explications sur les arrière-plans multiples.

• background-position: initial; (0) background-position: inherit; background-position: revert; background-position: revert-layer; background-position: revert-rule; background-position: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, revert-rule, unset.

Pour entrer dans le détail.

Pour être précis, background-position positionne l'arrière-plan par rapport à un point de référence, lui-même défini par la propriété background-origin. Par défaut ce point de référence se situe dans le coin en haut à gauche de l'élément, bordure exclue.

Les valeurs left top positionnent l'arrière-plan sur ce point de référence, tandis que les valeurs right bottom le positionnent sur le point symétrique, situé en bas à droite de l'élément.

Point de référence par défaut
pour left et top

Point de référence par défaut
pour right et bottom

La syntaxe suivante va donc positionner le coté gauche de l'image d'arrière-plan 10 pixels à droite du premier point de référence, et le bas de l'image à 20 pixels au-dessus du deuxième point de référence.

Les choses se compliquent si ces dimensions sont indiquées en pourcentages. Il faut d'abord définir ce qu'est la zone d'arrière-plan : c'est la zone comprise entre les deux points de référence.

Le pourcentage horizontal est calculé par rapport à la largeur de la zone d'arrière-plan - largeur de l'image d'arrière-plan.
Le pourcentage vertical est calculé par rapport à la hauteur de la zone d'arrière-plan - hauteur de l'image d'arrière-plan.

Cette complication a des avantages : 50% correspond à une image d'arrière-plan centrée sur l'élément, ce qui est assez intuitif. D'autre part left 100% est équivalent à right.

Exemple d'animation de background-position.

Les propriétés relatives au positionnement de l'arrière-plan peuvent être animées facilement. L'exemple ci-dessous est une animation suivant l'axe horizontal (propriété background-position-x. L'impression d'un défilement continu est due au fait que la largeur de l'élément (300 pixels) est un multiple entier de la largeur de l'image (150 pixels). L'effet est renforcé par une fonction d'accélération linéaire (animation-timing-function:linear).

Accéder à la propriété background-position par programme.

Modifier la position de l'arrière-plan en Javascript.

Voici comment modifier la valeur de background-position. Javascript accepte deux syntaxes :

• Avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots).
• Et avec la notation en camel-case, plus courante en Javascript (une majuscule pour séparer les mots).

let el = document.getElementById('id'); let value = el.style['background-position']; // ou let el = document.getElementById('id'); let value = el.style.backgroundPosition;

Lire la position de l'arrière-plan en Javascript.

Ce code lit la valeur de background-position affectée dans le code HTML, via l'attribut style (ou via un code Javascript comme celui ci-dessus). Mais il ne retrouve pas la valeur de la propriété si celle-ci a été affectée via un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['background-position']; // ou let el = document.getElementById('id'); let value = el.style.backgroundPosition;

Lire la valeur calculée de background-position en Javascript.

La valeur calculée est celle qui résulte de la cascade d'héritages : valeur sur l'élément lui-même, valeur héritée, valeur initiale. La valeur est renvoyée sous la forme de deux dimensions en pixels, ou de deux pourcentages, même si la propriété a été assignée avec un terme prédéfini comme center par exemple.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('background-position');

Lire ou écrire la valeur de la propriété background-position avec JQuery.


// Lire la valeur :
$('#id').prop('background-position');
// Écrire la valeur :
$('#id').prop('background-position', 'center top');
$('#id').prop('{background-position': 'center top'});


Lire la valeur calculée de la propriété background-position avec JQuery.

La valeur est renvoyée sous la forme de deux pourcentages ou de deux dimensions en pixels, le premier pour le positionnement horizontal, et le deuxième pour le positionnement vertical.

let value = $('#id').css('background-position');

Autres codes.

La page Javascript et CSS vous fournit d'autres exemples de code Javascript et JQuery.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété background-position et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de background-position. On constate en particulier que les valeurs prédéfinies sont mémorisées sous la forme de pourcentage, et que toutes les unités de dimension sont ramenées en pixels.

Exemple interactif avec la propriété background-position.

Ce simulateur est intéressant pour comprendre la logique de calcul des pourcentages. L'image mesure 150x150 pixels et, sur un écran de PC, l'élément mesure environ 750 pixels de large.
Si on demande un positionnement horizontal à 30%, le calcul est le suivant :
30% x (750 - 150) = 180 pixels, soit environ 24% de la largeur de l'élément.
Faites l'essai : vous verrez que le bord gauche de l'image est bien à peu près à 24% sur la graduation. Mais quoiqu'il en soit 50% place l'image au milieu de l'élément.

Compatibilité des navigateurs avec background-position.

Aucun problème de compatibilité n'est à signaler : tous les navigateurs prennent correctement en charge la propriété background-position.

1

Porpriété
background-position

2

Position par rapport
aux bordures

Estimation de la prise en charge globale.

96%

97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété background-position.

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.

  Concernant background-position Définition initiale de la propriété background-position.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant background-position Pas de changement concernant la propriété background-position.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Arrière-plans et bordures - Niveau 3

  Le niveau 3 de la spécification décrit en plus comment positionner le fond par rapport à la zone d'arrière-plan, et comment le découper.
  Concernant les bordures, la notion de bordure image est introduite, ainsi que la notion d'arrondi d'angle et d'ombrage de boîte.

  Concernant background-position Pas de changement concernant la propriété background-position.
  

  02 Août 2002

  Document de travail.

  

  17 Décembre 2009

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des arrière-plans.

Tout ce qui concerne les arrière-plans et les bordures et décrit dans la spécification du W3C "Module CSS - Arrière-plans et bordures". Voici les principales propriétés décrites dans cette norme.

Propriétés :