background-position-y
=====================

La propriété **`background-position-y`** définit la position verticale initiale de chaque image d'arrière-plan. La position est relative à l'origine définie par `background-origin`.

Exemple interactif
------------------

**Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec `background` ou `background-position` située après la déclaration.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
background-position-y: top;
background-position-y: bottom;
background-position-y: center;

/\* Valeurs proportionnelles \*/
/\* Type <percentage> \*/
background-position-y: 25%;

/\* Valeurs de longueur \*/
/\* Type <length> \*/
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;

/\* Déclaration indiquant un décalage \*/
/\* relatif à un des côtés de la boîte \*/
background-position-y: bottom 3px;
background-position-y: bottom 10%;

/\* Gestion de plusieurs valeurs \*/
/\* pour plusieurs arrières-plan \*/
background-position-y: 0px, center;

/\* Valeurs globales \*/
background-position-y: inherit;
background-position-y: initial;
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>`

Une valeur de longueur (type `<length>`) qui définit le décalage vertical de l'arrière-plan correspondant par rapport au bord haut de la zone d'arrière-plan. Si aucun côté n'est indiqué, l'écart fera référence au bord haut. Certains navigateurs permettent d'indiquer un décalage par rapport au côté bas.

`<percentage>`

Une valeur en pourcentages (type `<percentage>`) qui définit le décalage vertical de l'arrière-plan correspondant par rapport à un bord horizontal de la zone d'arrière-plan, proportionnellement à la hauteur de la zone. Si aucun côté n'est indiqué, l'écart fera référence au bord haut. Une valeur de 100% indique que le bas de l'image d'arrière-plan sera aligné avec le bas du conteneur et une valeur de 50% centrera l'image.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `0%` |
| Applicabilité | tous les éléments. S'applique aussi à `::first-letter` et `::first-line`. |
| Héritée | non |
| Pourcentages | fait 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ée | Une 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'animation | une liste répétable |

Syntaxe formelle
----------------
```

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

Spécifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 4 # background-position-longhands |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `background-position`
* `background-position-x`
* `background-position-inline`
* `background-position-block`
* Manipuler plusieurs arrière-plans