background-position

Syntaxe

Paramètres

Description

Cette propriété permet de fixer la position de l'image d'arrière-plan utilisé comme papier-peint.

Remarques

• Définition de la position de l'arrière-plan : La propriété background-position permet de définir la position d'une image de fond à l'intérieur d'un élément. Elle permet de contrôler où l'image de fond commence, par rapport à la zone de contenu, de padding, ou de bordure de l'élément. Cela est essentiel pour obtenir un placement précis des images de fond.
• Valeurs possibles : La propriété accepte plusieurs types de valeurs :
• Valeurs en pourcentage (par exemple, 50% 50%) qui positionnent l'image par rapport à la taille de l'élément. Par exemple, 50% 50% place l'image de fond au centre de l'élément.
• Valeurs absolues en pixels (par exemple, 20px 30px), où les positions horizontales et verticales de l'image sont définies en pixels par rapport aux bords de l'élément.
• Valeurs clés telles que left, center, et right pour la position horizontale et top, center, et bottom pour la position verticale.
• Positionnement horizontal et vertical : background-position accepte deux valeurs, la première pour la position horizontale et la seconde pour la position verticale. Par exemple, background-position: right bottom; positionne l'image de fond dans le coin inférieur droit de l'élément. Si une seule valeur est fournie, l'autre valeur est par défaut center.
• Alignement avec les coordonnées : Lorsqu'on utilise des pourcentages dans background-position, les valeurs sont relatives à la taille de l'élément contenant l'arrière-plan. Par exemple, background-position: 50% 50% centre l'image de fond à la fois horizontalement et verticalement, quel que soit la taille de l'élément.
• Interaction avec background-size : background-position est souvent utilisée en combinaison avec background-size pour obtenir un contrôle encore plus précis sur l'apparence de l'image de fond. Par exemple, si une image est redimensionnée avec background-size, vous pouvez ajuster background-position pour vous assurer que l'image est correctement alignée, même si elle est agrandie ou réduite.
• Effets de défilement avec les arrière-plans fixes : Lorsqu'un arrière-plan est défini avec la valeur background-attachment: fixed, la position de l'arrière-plan reste fixée lorsque la page est défilée. Cela peut être combiné avec background-position pour créer des effets de parallaxe, où l'arrière-plan se déplace à une vitesse différente du contenu principal.
• Positionnement dans les éléments avec plusieurs arrière-plans : Si un élément a plusieurs images de fond, vous pouvez définir des positions distinctes pour chaque image en utilisant background-position avec des valeurs séparées par des virgules. Par exemple, background-position: left top, right bottom; positionne respectivement la première image en haut à gauche et la seconde en bas à droite.
• Compatibilité et comportement par défaut : Par défaut, si background-position n'est pas spécifié, l'image de fond est positionnée dans le coin supérieur gauche de l'élément. Cette valeur par défaut peut être modifiée à l'aide de background-position pour ajuster la position de l'arrière-plan selon les besoins du design.