Attribut background-position-y CSS

Définition et utilisation

background-position-y Cette propriété est utilisée pour définir la position de l'image de fond sur l'axe y.

Astuce :Par défaut, l'image de fond est placée dans le coin supérieur gauche de l'élément et est répétée dans les directions verticale et horizontale.

Exemple

Exemple 1

Comment positionner l'image de fond sur l'axe y ?

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-y: center;
}

Essayez-le vous-même

Exemple 2

Comment positionner l'image de fond en haut de la page ?

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

Essayez-le vous-même

Exemple 3

Comment positionner l'image de fond en y utilisant un pourcentage :

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 50%;
}

Essayez-le vous-même

Exemple 4

Comment positionner l'image de fond en y utilisant des pixels :

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 80px;
}

Essayez-le vous-même

Syntaxe CSS

background-position-y: value;

Valeur de l'attribut

Valeur Description
top Place la position de l'image de fond au sommet de l'axe y.
bottom Place la position de l'image de fond au bas de l'axe y.
center Place la position de l'image de fond au centre de l'axe y.
y%

Le haut de l'axe y est à 0%, le bas à 100%.

Les pourcentages de valeur indiquent la hauteur de la zone de positionnement de l'image de fond moins la hauteur de l'image de fond.
ypos

Est la distance verticale depuis le haut.

L'unité peut être en pixels (comme 0px) ou autre Unités CSS.
ypos offset

Syntaxe à deux valeurs, prise en charge uniquement dans Firefox et Safari.

  • ypos Définir en haut ou en bas.
  • offset Est la distance verticale entre l'image de fond et le haut ou le bas définis par ypos.

L'unité peut être en pixels (comme 0px) ou autre Unités CSS.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Détails techniques

Valeur par défaut : 0%
Héritabilité : Non
Création d'animation : Pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.backgroundPositionY="center"

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Syntaxe à une valeur 1.0 12.0 49.0 1.0 15.0
Syntaxe à deux valeurs Non pris en charge Non pris en charge 49.0 15.4 Non pris en charge

Pages associées

Tutoriel :Arrière-plan CSS

Référence CSS :Attribut background-image

Référence CSS :Attribut background-position

Référence CSS :Attribut background-position-x

Référence HTML DOM :Attribut backgroundPosition