Propriété background-position CSS

Définition et utilisation

background-position La propriété définit la position de départ de l'image de fond.

Cette propriété définit l'image d'origine de l'arrière-plan (par background-image La position de l'image de fond (si elle doit être répétée), commence à cet endroit.

Astuce :Vous devez définir l'attribut background-attachment sur "fixede manière à ce que cette propriété fonctionne correctement dans Firefox et Opéra.

Veuillez également consulter :

Tutoriel CSS :Arrière-plan CSS

Manuel CSS :Attribut background-image

Manuel HTML DOM :Attribut backgroundPosition

Exemple

Comment positionner l'image de fond :

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Essayez-le vous-même

Syntaxe CSS

background-position: value;

Valeur de l'attribut

Valeur Description
  • à gauche en haut
  • au centre en haut
  • à droite en haut
  • à gauche au centre
  • au centre
  • au centre à droite
  • à gauche en bas
  • au centre en bas
  • en bas à droite

Si vous spécifiez uniquement un mot-clé, la deuxième valeur sera "center".

Valeur par défaut : 0% 0%.
x% y%

La première valeur est la position horizontale, la deuxième valeur est la position verticale.

Le coin supérieur gauche est 0% 0%. Le coin inférieur droit est 100% 100%.

Si vous ne spécifiez qu'une valeur, l'autre valeur sera 50%.
xpos ypos

La première valeur est la position horizontale, la deuxième valeur est la position verticale.

Le coin supérieur gauche est 0 0. L'unité est en pixels (0px 0px) ou toute autre unité CSS.

Si vous ne spécifiez qu'une valeur, l'autre valeur sera 50%.

Vous pouvez mélanger % et valeurs de position.

Détails techniques

Valeur par défaut : 0% 0%
Héritabilité : non
Version : CSS1
Syntaxe JavaScript : object.style.backgroundPosition="center"

Plus d'exemples

Comment utiliser % pour positionner l'image de fond
Cet exemple montre comment utiliser les pourcentages pour positionner l'image de fond sur une page.
Comment utiliser les pixels pour positionner l'image de fond
Cet exemple montre comment utiliser les pixels pour positionner l'image de fond sur une page.

Support du navigateur

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

Chrome Edge Firefox Safari Opéra
Chrome IE / Edge Firefox Safari Opéra
1.0 4.0 1.0 1.0 3.5