background-position
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La propriété CSS background-position
permet de définir la position initiale, relative à l'origine définie par background-origin
, pour chaque image d'arrière-plan.
Exemple interactif
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: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
/* Plusieurs valeurs pour plusieurs arrières-plans */
background-position:
0 0,
center;
/* Valeurs exprimant un décalage relatif aux côtés */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;
/* Valeurs globales */
background-position: inherit;
background-position: initial;
background-position: revert;
background-position: revert-layer;
background-position: unset;
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 à quatre valeurs. Si deux valeurs qui ne sont pas des mots-clés sont utilisées, la première représente la position horizontale et la seconde la position verticale. Si une seule valeur est indiquée, la deuxième seracenter
par défaut. Si trois ou quatre valeurs sont utilisées, les valeurs de longueur-pourcentage sont des décalages relatifs au(x) mot(s)-clé(s) précédent(s).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%) et l'élément sera placé au milieu de cet axe. - Une longueur (
<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
. Sileft
ouright
est utilisé, la valeur définit l'abscisse et l'autre définira l'ordonnée. Sitop
oubottom
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 vautleft
ouright
, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur esttop
oubottom
, 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.
Note : Si une valeur est
top
oubottom
, la seconde ne peut pas êtretop
oubottom
. Si une valeur estleft
ouright
, la seconde ne peut pas êtreleft
ouright
. Autrement dit, les combinaisonstop top
,bottom bottom
,top bottom
,bottom top
,right right
,left left
,left right
etright left
seront considérées comme invalides.-
L'ordre des mots-clés n'est pas important, le navigateur pourra les réarranger si besoin. Ainsi,
top left
etleft top
auront le même effet. En revanche, si on associe une longueur (<length>
) ou un pourcentage (<percentage>
) avec un mot-clé, l'ordre est important et la valeur définissant l'abscisse doit arriver avant l'ordonnée :right 20px
ne sera pas équivalent à20px right
et cette dernière forme sera invalide. Les valeursleft 20%
ou20% bottom
sont valides car les abscisses et ordonnées sont bien rangées. -
La valeur par défaut est
left top
ou0% 0%
.
Définition avec 3 valeurs : Deux valeurs sont des mots-clés et la troisième est le décalage appliqué à la valeur qui précède.
- La première valeur est l'un des mots-clés
top
,left
,bottom
,right
, oucenter
. Sileft
ouright
sont fournis, cela définit la position sur l'axe horizontale et sitop
orbottom
sont fournis, cela définit la position sur l'axe vertical et l'autre mot-clé définit la position sur l'axe horizontal. - La longueur (type
<length>
) ou le pourcentage (type<percentage>
), s'il est utilisé en deuxième valeur, sera considéré comme le décalage à appliquer pour la première valeur. S'il s'agit de la troisième valeur, ce sera le décalage à appliquer à la deuxième valeur. - Il n'y a qu'une seule longueur ou qu'un seul pourcentage attendu pour définir le décalage de la valeur précédente. Toute combinaison d'un mot-clé avec deux longueurs ou deux pourcentages sera considérée comme invalide.
Définition avec 4 valeurs : La première et la troisième valeur sont des mots-clés pour la position horizontale d'une part et verticale d'autre part. La deuxième et la quatrième valeur sont des décalages pour les valeurs qui les précèdent :
- La première et la troisième valeur utilisent l'un des mots-clés suivant :
top
,left
,bottom
,right
. Sileft
ouright
sont utilisés, cela définit la position horizontale. Sitop
oubottom
sont utilisés, cela définit la position verticale et l'autre mot-clé définit alors la valeur horizontale. - La deuxième et la quatrième valeur sont des longueurs (
<length>
) ou des pourcentages (<percentage>
). La deuxième valeur est le décalage pour le premier mot-clé tandis que la quatrième valeur est le décalage correspondant au deuxième mot-clé.
- Le mot-clé
À propos des pourcentages
Lorsqu'on exprime un décalage en pourcentage, ce dernier est relatif au conteneur. Ainsi, une valeur de 0% indiquera que le côté gauche (ou haut) du bord de l'image est aligné avec le bord gauche (ou haut) du conteneur. Une valeur de 100% indiquera que le côté droit (ou bas) de l'image d'arrière-plan est alignée avec le bord droit (ou bas) du conteneur. Une valeur de 50% permettra de centrer l'image.
Autrement dit, lorsqu'on utilise un pourcentage, celui-ci s'inscrit dans la formule suivante :
(largeur conteneur - largeur image) * (position en %) = (décalage horizontal) (hauteur conteneur - hauteur image) * (position en %) = (décalage vertical)
En utilisant l'axe horizontal pour un exemple, prenons une image dont la largeur mesure 300px, qu'on utilise celle-ci dans un conteneur dont la largeur mesure 100px et que background-size
vaut auto
:
100px - 300px = -200px (différence entre le conteneur et l'image)
Voici donc les décalages, exprimés en pixels, qu'on obtient avec les pourcentages -25%, 0%, 50%, 100% et 125% :
-200px * -25% = 50px -200px * 0% = 0px -200px * 50% = -100px -200px * 100% = -200px -200px * 125% = -250px
Traduisons l'effet obtenu avec ces valeurs. Le bord gauche de l'image est décalé du bord gauche du conteneur de :
- + 50px (plaçant ainsi le bord gauche de l'image au centre du conteneur large de 100px)
- 0px (le bord gauche de l'image coïncide avec le bord gauche du conteneur)
- -100px (le bord gauche de l'image est situé à 100px du bord gauche du conteneur, ce qui signifie pour notre exemple que c'est la partie centrale de l'image qui est inscrite dans le conteneur)
- -200px (le bord gauche de l'image est situé à 200px du bord gauche du conteneur, ce qui signifie pour notre exemple que le bord droit de l'image coïncide avec le bord droit du conteneur)
- -250px (le bord gauche de l'image est situé à 250px du bord gauche du conteneur, ce qui signifie pour notre exemple que le bord droit de l'image de 300px est au centre du conteneur).
On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour background-position
n'auront aucun effet (car la différence entre l'image et le conteneur est alors nulle). Il faudra utiliser des valeurs absolues pour décaler l'image.
Définition formelle
Valeur initiale | 0% 0% |
---|---|
Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line . |
Héritée | non |
Pourcentages | se 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 |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | une liste répétable |
Syntaxe formelle
background-position =
<bg-position>#
<bg-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>? ]
<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.
HTML
<div class="exemple_un">Premier exemple</div>
<div class="exemple_deux">Deuxième exemple</div>
<div class="exemple_trois">Troisième exemple</div>
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("startransparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.exemple_deux {
background: url("startransparent.gif") #ffee99 left 4em bottom 1em 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("startransparent.gif"), url("catfront.png");
background-position:
0px 0px,
right 3em bottom 2em;
}
Résultat
Spécifications
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # background-position |
Compatibilité des navigateurs
BCD tables only load in the browser