background-position-y

La propriété background-position-y définit la position verticale initiale de l'arrière-plan par rapport à l'origine, définie background-origin, pour chaque image d'arrière-plan. Pour plus d'informations, se référer à la documentation de la propriété background-position qui existe depuis plus longtemps.

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 de background-position-x.

Valeur initialetop
Applicabilitétous les éléments
Héritéenon
Pourcentagesfait référence à la hauteur de la zone de positionement de l'arrière-plan moins la hauteur de l'image d'arrière-plan
Médiavisuel
Valeur calculéeUne liste dont chaque élément se comompose 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'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* 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;

/* 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 à un bord horizontal de la zone d'arrière-plan. Si aucun côté n'est indiqué, l'écart fera référence au bord haut.
<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.

Syntaxe formelle

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


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

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 4
La définition de 'background-position-y' dans cette spécification.
Brouillon de l'éditeur Spécification initiale pour les propriétés détaillées de background-position, implémentée depuis longtemps.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox Internet Explorer Opera Safari Servo
Support simple(Oui)1249.06(Oui)(Oui)?
Two-value syntax (support for offsets from any edge)Aucun support1249.09.0Aucun supportAucun support?
Fonctionnalité Android Chrome for Android Edge Mobile Firefox for Android IE Mobile Opera Mobile Safari Mobile
Support simple(Oui)(Oui)(Oui)49.0???
Two-value syntax (support for offsets from any edge)Aucun supportAucun support(Oui)49.0?Aucun supportAucun support

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,