documentation css background-position

Version CSS : 1

• S’applique à : Eléments de types blocs et éléments remplacés.
• Valeur héritée : non
• Valeur par défaut : 0% 0%

Permet de positionner une image d’arrière plan définie avec background-image dans un élément. Cette attribut s’utilise en général lorsque l’image n’est pas répétée (background-repeat).

Il est possible de donner une ou deux valeurs pour positionner l’élément, dans le cas de deux valeurs utilisées, les séparer d’un espace. La première valeur donnée s’apliquera à la position horizontale. Si on ne donne qu’une indication de position, la seconde position prendra automatiquement la valeur center ou 50%. Si l’unique valeur est exprimée numériquement longueur ou %), elle sera affectée à la position horizontale par rapport au bord gauche. Les valeurs en pourcentage et de longueur peuvent être combinée entre elles mais ne peuvent l’être avec les noms de position. Les valeurs négatives sont également admises.

Les indications de longeurs placent le coin supérieur gauche de l’image dans l’espace. Les indications de pourcentages placent l’image dans l’espace par rapport au point définit par ces pourcentages dans l’image. Ainsi, pour une image définie à 20% 30%, le point situé à 20% 30% dans l’image sera placé au point situé à 20% 30% dans l’espace.

Correspondances :

• 0% 0% = top left
• 50% 50% = center center
• 100% 100% = bottom right

Exemple de script

.bgdroitebas {
  background-position: right bottom;
}
 
.bgprecis {
  background-position: 36px 22px;
}