attribut BACKGROUND-POSITION

Rôle

L’attribut background-position permet d’indiquer la position d’une image de fond d’un élément HTML.

Version : CSS1

Héritage (inherit) : non

Propriété Javascript : element.style.backgroundPosition

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

div{
  width: 400px;
  height: 200px;
  background-image: url(http://lorempixel.com/400/200/);
  border: thin silver solid;
  background-repeat: no-repeat;
  background-position: 30px 30px;
}

– Le code HTML

<div></div>

Résultat

Compatibilité

L’attribut background-position est pris en charge par tous les principaux navigateurs

Valeurs

Le référentiel de l’image (le point 0) par défaut est situé en haut à gauche du bloc qui contient l’image de fond.

Les différentes valeurs de l’attribut background-position sont:

Valeur pour la position horizontale puis pour la position verticale :

Indiquer une valeur en pixel, en em…
Syntaxe :
background-position : 20px 30px

Valeur en % pour la position horizontale puis pour la position verticale :

Le point 100% 100% correspond au coin inférieur droit du bloc qui contient l’image de fond
Syntaxe :
background-position : 100% 100%

Exemple :

Utiliser des mots clés pour la position horizontale puis pour la position verticale :

Valeur possible : right, top, bottom, left, center.
Si une seule valeur est fournie, la deuxième sera center par défaut

Syntaxe :
background-image : left bottom

Exemple :

initial

La position est définie à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité, par exemple un paragraphe peut ignorer la position d’une image de fond imposée par une feuille de style qui le cible.
Syntaxe :
background-position : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
background-position : inherit

A voir aussi

background– background-color– background-image– background-position– background-repeat–background-size– background-origin– background-clip– background-attachment