Propriété background-position

La propriété background-position définit la position de l'image d'arrière-plan d'un élément. La position peut être définie à l'aide de n'importe quelle unité de taille. La première valeur désigne le décalage depuis la gauche, la seconde - le décalage depuis le haut.

Il est également possible de définir la position avec des mots-clés. Dans ce cas, l'ordre des valeurs n'a pas d'importance. Les mots-clés pour la verticale : top, center, bottom. Les mots-clés pour l'horizontale : left, center, right.

Comment utiliser les mots-clés

Pour positionner une image avec un mot-clé, il faut spécifier une valeur pour la verticale et une pour l'horizontale. Par exemple, si vous spécifiez la valeur top right, l'image se placera en haut à droite.

L'ordre des mots n'a pas d'importance : on peut écrire top right, ou bien - right top. Si le mot-clé center est présent - il peut être omis. Par exemple, top center est équivalent à simplement top. Et center center est équivalent à simplement center.

Syntaxe

sélecteur {
	background-position: deux valeurs séparées par un espace;
}

Exemple

Par défaut, l'image d'arrière-plan sera dans le coin supérieur gauche :

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

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

Exemple

Plaçons l'image d'arrière-plan dans le coin supérieur droit :

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

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

Exemple

Plaçons l'image d'arrière-plan dans le coin inférieur droit :

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

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

Exemple

Plaçons l'image d'arrière-plan à droite et centrée verticalement :

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

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

Exemple

Plaçons l'image d'arrière-plan au centre du bloc :

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

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

Exemple

Plaçons l'image d'arrière-plan à une distance de 20px de la gauche et de 40px du haut :

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

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

Exemple

Plaçons l'image d'arrière-plan à une distance de 90% de la gauche et de 100% du haut :

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

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

Exemple

Plaçons l'image d'arrière-plan à une distance de 30px de la gauche et en bas verticalement :

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

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

Exemple

Plaçons l'image d'arrière-plan à une distance de 30px de la gauche et centrée verticalement :

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

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

Exemple

Plaçons l'image d'arrière-plan à une distance de 30px du haut et centrée horizontalement :

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

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

Voir aussi

la propriété background,
qui est une propriété raccourcie pour l'arrière-plan