Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

background-position - Propriété CSS

background-position
background-position-x
background-position-y

Résumé des caractéristiques de la propriété background-position

Description rapide
Définit comment se positionne l'image d'arrière-plan.
Statut
Standard
S'applique à
Tous les éléments.
Type de valeur
Valeur prédéfinie {1-2} | Dimension {1-2} | Pourcentage {1-2}
(multiple)
Valeurs prédéfinies
bottom | center | left | right | top
Pourcentages
Calculés par rapport à la taille de l'élément moins la taille de l'image de fond.
Valeur initiale
0
Héritée par défaut
Non
Type d'animation
Repeatable list : liste répétable.
Module W3C
Module CSS - Arrière-plans et bordures
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

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 :

  • background-position-x : positionnement horizontal de l'arrière-plan.
  • background-position-y : positionnement vertical de l'arrière-plan.

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 background 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.

Syntaxes pour background-position.

rx et ry sont des distances par rapport à un des bords de l'élément.
x et y sont des distances par rapport respectivement au bord gauche et au bord du haut.
Plusieurs valeurs peuvent être indiquées, séparées par des virgules, s'il y a plusieurs arrière-plans définis pour l'élément.

background-position:
Schéma syntaxique de la propriété background-positionSyntaxe de background-position, propriété CSS pour la gestion des arrière-plans. left left left xr left xr center center right right right xr right xr x x top top top yr top yr center center bottom bottom bottom yr bottom yr y y , ,
;
  • 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.

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

    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 CSS de dimension.
    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.

  • background-position: 10px 30px;

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

    Cette syntaxe est équivalente à left 10px 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 à background pour des explications plus complètes sur les arrière-plans multiples.

  • background-position: initial; background-position: inherit; background-position: revert; background-position: revert-layer; background-position: unset;

    La valeur initiale est : 0.

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.

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.

Par défaut, les marges intérieures (padding) sont incluses entre ces deux points de référence mais la propriété background-origin peut changer ça.

Propriété background-position

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.

background-position: top 10px bottom 20px;

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

Background-position

Le pourcentage horizontal est calculé par rapport à (largeur de la zone de référence - largeur de l'image d'arrière-plan).

Le pourcentage vertical est calculé par rapport à (hauteur de la zone de référence - 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.

Manipulation de la propriété background-position par programme.

Dans les exemples de code ci-après, la propriété background-position est modifiée sur l'élément ci-dessous. Les modifications sont immédiatement répercutées sur l'affichage.

Modifier la valeur de background-position en Javascript.

Voici comment modifier la valeur de background-position pour un élément el. 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).

function setBackgroundPosition(el) {
el.style['background-position']='center';
// ou
el.style.backgroundPosition='center';
}

Lire en Javascript la valeur de background-position.

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).


function getBackgroundPosition(el) {
alert(el.style['background-position']);
// ou
alert(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 pourcentages, même si la propriété a été assignée avec un terme prédéfini comme center par exemple.


function getCalcBackgroundPosition(el) {
alert(window.getComputedStyle(el).getPropertyValue('background-position'));
}

Modifier la valeur de la propriété background-position avec JQuery.


function setBackgroundPosition(el) {
$(el).css('background-position','right bottom');
// ou
$(el).css('backgroundPosition','right bottom');
}

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

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


function getCalcBackgroundPosition(el) {
alert($(el).css('background-position'));
// ou
alert($(el).css('backgroundPosition'));
}

Simulateur.

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.

background-position-x :
background-position-y :
Image d'arrière-plan non répétée
Image d'arrière-plan répétée

Compatibilité entre navigateurs.

Aucun problème de compatibilité n'est à signaler : tous les navigateurs prennent correctement en charge la propriété background-position. Cependant, la syntaxe acceptant deux valeurs pour X ou pour Y est encore mal reconnue.

Colonne 1
Support des arrière-plans multiples.
Colonne 2
Compatibilité des navigateurs avec la propriété background-position.
Colonne 3
Traitement correct de la syntaxe de background-position permettant de position l'arrière-plan par rapport à un ou deux des côtés de l'élément.
Exemple : background-position: right 10px bottom 20px;
1
Multiples
2
background-position
3
Relative to side
Estimation de la prise en charge en pourcentage du parc actuel.
97%
97%
97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que background-position.

Les spécifications CSS éditées par le W3C sont organisées en modules. background-position fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Résumé des propriétés de l'arrière-plan.
Mode de défilement de l'image d'arrière-plan.
Définit l'étendue de l'arrière-plan, en particulier par rapport à la bordure et aux marges intérieures..
Définit la couleur de l'arrière-plan.
Image d'arrière-plan.
Position de l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan dans le sens horizontal.
Définit comment se positionne l'image d'arrière-plan dans le sens vertical.
Définit comment est répété l'image d'arrière-plan.
Dimensionnement de l'image d'arrière-plan.
Propriété résumée qui définit l'ensemble des paramètres des bordures.
Définit le rayon de l'angle arrondi en bas à gauche.
Définit le rayon de l'angle arrondi en bas à droite.
Définit la couleur des bordures.
Résumé des propriétés des bordures réalisées avec des images.
Définit le débordement de l'image de bordure.
Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue..
Définit comment l'image de bordure est découpée.
Définit l'image utilisée pour construire la bordure.
Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.
Rayon des angles arrondis.
Type de bordure (simple, double, pointillé...).
Définit le rayon de l'angle arrondi en haut à gauche.
Définit le rayon de l'angle arrondi en haut à droite.
Définit l'épaisseur de la bordure de l'élément.
Applique un effet d'ombrage sur les blocs.