Propriété CSS background-position-y

La propriété background-position-y définit la position verticale pour chaque arrière-plan.

Une ou plusieurs valeurs peuvent être spécifiées séparées par virgules.

Valeurs négatives sont valides.

Cette propriété est expérimentale.

Valeur initiale	top
Appliquée à	Tous les éléments.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.backgroundPositionY = "bottom";

Syntaxe

background-position-y: top | center | bottom | length | percentage | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      html { 
      height: 50%;
      }
      body {
      background: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat; 
      background-position-y: top;   
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background-position-y</h2>
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec la valeur "bottom":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      html { 
      height: 50%;
      }
      body {
      background: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat; 
      background-position-y: bottom;   
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background-position-y</h2>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
top	Spécifie l'alignement du bord haut de l'image de l'arrière-plan avec le bord haut de la zone dédiée à l'arrière-plan.
center	Spécifie l'alignement du centre de l'image de l'arrière-plan avec le centre de la zone dédiée à l'arrière-plan.
bottom	Spécifie l'alignement du bord bas de l'image de l'arrière-plan avec le bas de la zone dédiée à l'arrière-plan.
length	Spécifie le décalage vertical de l'arrière-plan correspondant par rapport à un bord horizontal de la zone d'arrière-plan.
percentage	Définit le décalage vertical de l'arrière-plan correspondant par rapport au conteneur. 0% aligne le bord gauche de l'image de l'arrière-plan avec le bord gauche du conteneur, et 100% aligne le bord droit de l'image de l'arrière-plan avec le bord droit du conteneur, et 50% centre horizontalement l'image de l'arrière-plan.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.