background-position |
Position d'arrière-plan |
---|---|
CSS |
Syntaxe
background-position: paramètres; |
Paramètres
Paramètre | Description | |
---|---|---|
paramètres | Ce paramètre de propriété permet d'indiquer l'emplacement : | |
Valeur | Description | |
top left | Ces attributs permettent d'indiquer que l'image d'arrière-plan est situé en haut à gauche. | |
top center | Ces attributs permettent d'indiquer que l'image d'arrière-plan est situé en haut au centre. | |
top right | Ces attributs permettent d'indiquer que l'image d'arrière-plan est situé en haut à droite. | |
center left | Ces attributs permettent d'indiquer que l'image d'arrière-plan est situé au milieu à gauche. | |
center center | Ces attributs permettent d'indiquer que l'image d'arrière-plan est situé au milieu au centre. | |
center right | Ces attributs permettent d'indiquer que l'image d'arrière-plan est situé au milieu à droite. | |
bottom left | Ces attributs permettent d'indiquer que l'image d'arrière-plan est situé en bas à gauche. | |
bottom center | Ces attributs permettent d'indiquer que l'image d'arrière-plan est situé en bas au centre. | |
bottom right | Ces attributs permettent d'indiquer que l'image d'arrière-plan est situé en bas à droite. | |
x% y% | Ces attributs permettent d'indiquer respectivement la position horizontal et vertical en pourcentage. | |
xpos ypos | Ces attributs permettent d'indiquer respectivement la position horizontal et vertical en pixels. |
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.
Dernière mise à jour : Dimanche, le 20 décembre 2015