CSS:background-position
Un article de MDC.
[modifier] Résumé
background-position définit la position initiale d'une image d'arrière-plan déclarée.
- Valeur initiale : 0% 0%
- S'applique à : tous les éléments
- Héritée : non
- Pourcentages : se réfère à la taille de la boîte elle-même
- Média : visuel
- Valeur calculée : pour les <length> la valeur absolue, autrement un pourcentage
[modifier] Syntaxe
background-position: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
[modifier] Valeurs
- <percentage> <percentage>
- Avec la paire de valeurs '0% 0%', le coin supérieur gauche de l'image est aligné avec le coin supérieur gauche de la bordure de l'espacement de la boîte. La paire de valeurs '100% 100%' place le coin inférieur droit de l'image dans le coin inférieur droit de l'aire d'espacement. Avec la paire de valeurs '14% 84%', le point situé à 14% vers la droite et 84% vers le bas de l'image est placé au point situé à 14% vers la droite et 84% vers le bas de l'aire d'espacement.
- <length> <length>
- Avec la paire de valeur '2cm 1cm', le coin supérieur gauche de l'image est placé à 2 cm à droite et à 1 cm en dessous du coin supérieur gauche de l'aire d'espacement.
- top left et left top
- Identique à '0% 0%'.
- top, top center et center top
- Identique à '50% 0%'.
- right top et top right
- Identique à '100% 0%'.
- left, left center et center left
- Identique à '0% 50%'.
- center et center center
- Identique à '50% 50%'.
- right, right center et center right
- Identique à '100% 50%'.
- bottom left et left bottom
- Identique à '0% 100%'.
- bottom, bottom center et center bottom
- Identique à '50% 100%'.
- bottom right et right bottom
- Identique à '100% 100%'.
Si une seule valeur est définie, alors cela spécifie la position horizontale, avec la position verticale à 50%. Autrement, la première valeur spécifie la position horizontale. Les combinaisons de mots-clefs, de longueurs et de pourcentages sont autorisées. Cependant si les mots-clefs sont mélangés avec d'autres valeurs, left et right ne doivent être utilisés que comme première valeur et les mots clefs top et bottom comme seconde valeur. Les positions négatives sont autorisées.
[modifier] Exemples
.exampleone {
background-image: url("logo.png");
background-position: top center;
}
.exampletwo {
background-image: url("logo.png");
background-position: 25% 75%;
}
.examplethree {
background-image: url("logo.png");
background-position: 2cm bottom;
}
.examplefour {
background-image: url("logo.png");
background-position: center 10%;
}
.examplefive {
background-image: url("logo.png");
background-position: 2cm 50%;
}
[modifier] Spécifications
[modifier] Compatibilité des navigateurs
| Navigateur | Version minimale |
|---|---|
| Internet Explorer | 4 |
| Firefox | 1 |
| Netscape | 6 |
| Opera | 3.5 |
[modifier] Voir également
background,
background-attachment,
background-color,
background-image,
background-position,
background-repeat