1. Web
  2. CSS
  3. Référence
  4. Propriétés CSS
  5. background-position-y

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

background-position-y

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2016.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSS background-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 par background-origin.

La valeur de cette propriété est remplacée par toute déclaration des propriétés raccourcies background ou background-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 class="display-block" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

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

Syntaxe

css
/* 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 bord inférieur de l'image d'arrière-plan est aligné avec le bord inférieur du conteneur. Ainsi, une valeur de 50% centre l'image d'arrière-plan verticalement.

Définition formelle

Valeur initiale0%
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Pourcentagesfait référence à la hauteur de la zone de positionnement de l'arrière-plan moins la hauteur de l'image d'arrière-plan
Valeur calculéeUne liste dont chaque élément se compose d'un décalage (exprimé comme la combinaison d'une longueur absolue et d'un pourcentage) et d'un mot-clé pour l'origine
Type d'animationune liste répétable

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

html
<div></div>

CSS

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

html
<div></div>

CSS

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

Specification
CSS Backgrounds Module Level 4
# background-position-longhands

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content