Propriété background-position-y

La propriété background-position-y définit la position verticale de l'image de fond d'un élément.

La propriété peut prendre les valeurs suivantes : top, center, bottom, et il est également possible de spécifier la position du fond en pourcentages ou en pixels.

Syntaxe

csssélecteur {
  background-position-y: valeur;
}

Exemple

Plaçons l'image de fond en haut verticalement :

html<div id="elem"></div>

css#elem {
  background-position-y: top;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Exemple

Maintenant, centrons le fond verticalement :

html<div id="elem"></div>

css#elem {
  background-position-y: center;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Exemple

Maintenant, spécifions la position du fond en pourcentages :

html<div id="elem"></div>

css#elem {
  background-position-y: 80%;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Voir aussi