background-position-y

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.

* Some parts of this feature may have varying levels of support.

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

Spécifications

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

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-position-y
Side-relative values (such as bottom 10%)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Voir aussi