Propriété CSS background-position

❮ Précédent Référence CSS complète Suivant ❯

Exemple

Comment positionner une image de fond :

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

Plus d'exemples "Essayez-le vous-même" ci-dessous.

Définition et utilisation

La background-positionpropriété définit la position de départ d'une image d'arrière-plan.

Astuce : Par défaut, une image d'arrière-plan est placée dans le coin supérieur gauche d'un élément et répétée à la fois verticalement et horizontalement.

Valeur par défaut:	0% 0%
Hérité:	non
Animable :	Oui. En savoir plus sur l'animation
Version:	CSS1
Syntaxe JavaScript :	objet .style.backgroundPosition="centre"

Prise en charge du navigateur

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

Property
background-position	1.0	4.0	1.0	1.0	3.5

Remarque : IE8 et les versions antérieures ne prennent pas en charge plusieurs images d'arrière-plan sur un élément.

Syntaxe CSS

background-position: value;

Valeurs de propriété

Value	Description	Play it
left top left center left bottom right top right center right bottom center top center center center bottom	If you only specify one keyword, the other value will be "center"
x% y%	The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
xpos ypos	The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Plus d'exemples

Exemple

Comment positionner une image de fond pour qu'elle soit centrée en haut :

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

Exemple

Comment positionner une image d'arrière-plan en bas à droite :

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

Exemple

Comment positionner une image d'arrière-plan à l'aide de pourcentage :

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

Exemple

Comment positionner une image de fond à l'aide de pixels :

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

Exemple

Utilisez différentes propriétés d'arrière-plan pour créer une image "héro":

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}