Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

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
Pourcentagesrefer to height of background positioning area minus height of background image
Médiavisuel
Valeur calculéeA list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
Animablenon
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 ] [ <percentage> | <length> ]? ]#

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 Firefox (Gecko) Internet Explorer Opera Safari
Support simple (Oui) 49.0 (49.0) (Oui) (Oui) (Oui)
Syntaxe avec deux valeurs (décalage depuis un côté) Pas de support 49.0 (49.0) (Oui) Pas de support ?
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) 49.0 (49.0) ? ? (Oui)
Syntaxe avec deux valeurs (décalage depuis un côté) ? 49.0 (49.0) ? ? ?

Voir aussi

Étiquettes et contributeurs liés au document

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