La propriétéCSSbackground-position-y définit la position verticale initiale de chaque image d'arrière-plan. La position est relative à la couche de position définie parbackground-origin.

La valeur de cette propriété est remplacée par toute déclaration des propriétés raccourciesbackground oubackground-position appliquées à l'élément après elle.

Exemple interactif

background-position-y: top;

background-position-y: center;

background-position-y: 25%;

background-position-y: 2rem;

background-position-y: bottom 32px;

<section>  <div></div></section>

#example-element {  background-color: navajowhite;  background-image: url("/shared-assets/images/examples/star.png");  background-repeat: no-repeat;  height: 100%;}

Syntaxe

/* Valeurs avec un mot-clé */background-position-y: top;background-position-y: center;background-position-y: bottom;/* Valeur en pourcentage <percentage> */background-position-y: 25%;/* Valeurs de longueur <length> */background-position-y: 0px;background-position-y: 1cm;background-position-y: 8em;/* Valeurs de décalage relatif */background-position-y: bottom 3px;background-position-y: bottom 10%;/* Valeurs multiples */background-position-y: 0px, center;/* Valeurs globales */background-position-y: inherit;background-position-y: initial;background-position-y: revert;background-position-y: revert-layer;background-position-y: unset;

Valeurs

top

Le bord haut de l'image d'arrière-plan est aligné avec le bord haut de la zone dédiée à l'arrière-plan.

center

L'image d'arrière-plan est centrée verticalement par rapport à la zone dédiée à l'arrière-plan.

bottom

Le bas de l'image d'arrière-plan est aligné avec le bas de la zone dédiée à l'arrière-plan.

<length>

Le décalage du bord horizontal de l'image d'arrière-plan par rapport au bord horizontal supérieur correspondant de la couche de position d'arrière-plan. (Certains navigateurs permettent d'utiliser le bord inférieur pour le décalage.)

<percentage>

Le décalage de la position verticale de l'image d'arrière-plan par rapport au conteneur. Une valeur de 0% signifie que le bord supérieur de l'image d'arrière-plan est aligné avec le bord supérieur du conteneur, et une valeur de 100% signifie que le bordinférieur de l'image d'arrière-plan est aligné avec le bordinférieur du conteneur. Ainsi, une valeur de 50% centre l'image d'arrière-plan verticalement.

Définition formelle

Syntaxe formelle

background-position-y =
[center|[[top|bottom|y-start|y-end]?<length-percentage>?]!]#

<length-percentage> =
<length>|
<percentage>

Exemples

Exemple simple

L'exemple suivant montre une implémentation d'image d'arrière-plan, avec la position horizontale de l'arrière-plan et la position verticale de l'arrière-plan utilisées pour définir séparément la position horizontale et la position verticale de l'image.

HTML

<div></div>

CSS

div {  width: 300px;  height: 300px;  background-color: skyblue;  background-image: url("https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png");  background-repeat: no-repeat;  background-position-x: center;  background-position-y: bottom;}

Résultat

Valeurs relatives aux côtés

L'exemple suivant montre la prise en charge de la syntaxe de décalage relatif aux côtés, qui permet de décaler l'arrière-plan à partir de n'importe quel bord.

HTML

<div></div>

CSS

div {  width: 300px;  height: 300px;  background-color: seagreen;  background-image: url("https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png");  background-repeat: no-repeat;  background-position-x: right 20px;  background-position-y: bottom 10px;}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriétébackground-position
• La propriétébackground-position-x
• Utiliser plusieurs arrière-plans