plan de cours

Manuel de référence CSS

propriété CSS

Cours optionnel

Recommandation de cours :

CodeW3C.com Boîte à outils

Attribut background-position-x CSS

page précédente background-position
Page suivante background-position-y

Définition et utilisation

background-position-x La propriété positionne l'image de fond sur l'axe x.

Astuce :Par défaut, l'image de fond est placée dans le coin supérieur gauche de l'élément et répétée dans les directions verticale et horizontale.

Exemple

Exemple 1

Comment positionner l'image de fond sur l'axe x :

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

Essayer personnellement

Exemple 2

Comment positionner l'image de fond à droite :

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

Essayer personnellement

Exemple 3

Comment utiliser la positionnement en pourcentage de l'image de fond :

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

Essayer personnellement

Exemple 4

Comment utiliser la positionnement en pixels de l'image de fond :

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

Essayer personnellement

Exemple 5

Créer une image de fond couvrant le conteneur en utilisant différentes propriétés de fond :

.hero-image {
  background-image: url("photographer.jpg"); /* Utilisation de l'image */
  background-color: #cccccc; /* Utilisez cette couleur si l'image n'est pas disponible */
  height: 300px; /* Doit définir la hauteur */
  background-position-x: center; /* Place l'image au centre */
  background-repeat: no-repeat; /* Ne pas répéter l'image */
  background-size: cover; /* Ajuste la taille de l'image de fond pour le couvrir tout entier */
}

Essayer personnellement

Syntaxe CSS

background-position-x: value;

Valeur de l'attribut

Valeur	Description
left	Place la position de l'image de fond à gauche de l'axe x.
right	Place la position de l'image de fond à droite de l'axe x.
center	Place la position de l'image de fond au centre de l'axe x.
x%	La gauche de l'axe x est de 0%, et la droite est de 100%. Les pourcentages représentent la largeur de la zone de positionnement de l'image de fond moins la largeur de l'image de fond.
xpos	représente la distance horizontale de la gauche. Les unités peuvent être des pixels (comme 0px) ou d'autres Unités CSS.
xpos décalage	grammaire à deux valeurs, prise en charge uniquement dans Firefox et Safari. xpos définir comme left ou right décalage représente la distance horizontale entre l'image de fond et la gauche ou la droite définies par xpos Les unités peuvent être des pixels ou d'autres Unités CSS.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Détails techniques

Valeur par défaut :	0%
Héritabilité :	non
Création d'animation :	pris en charge. Voir :propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.backgroundPositionX="center"