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>

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>

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.

Support de Navigateurs

4.0+ 49.0+ 3.1+ 15.0+


Trouvez-vous cela utile?

Articles Associées