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.

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

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

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
background-position-yChrome Support complet 1Edge Support complet 12Firefox Support complet 49IE Support complet 6Opera Support complet 15Safari Support complet 1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 49Opera Android Support complet 14Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
Two-value syntax (support for offsets from any edge)Chrome Aucun support NonEdge Support complet 12Firefox Support complet 49IE Support complet 9Opera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 49Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi