background-position-y
Baseline
Widely available
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2016.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
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
background-position-y: top;
background-position-y: center;
background-position-y: 25%;
background-position-y: 2rem;
background-position-y: bottom 32px;
<section class="display-block" id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#example-element {
background-color: navajowhite;
background-image: url("/shared-assets/images/examples/star.png");
background-repeat: no-repeat;
height: 100%;
}
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.
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 Module Level 4 # background-position-longhands |
Compatibilité des navigateurs
Chargement…