|
Donner une position initiale à une image de fond ( background-image ) spécifique. Cette propriété peut être appliquée à un bloc et à un "replaced elements". Un "replaced elements", c'est un élément dont les dimensions intrinsèques sont connues comme: IMG, INPUT, TEXTAREA, SELECT, et OBJECT.
Percentages et lengths peuvent être utilisés pour donner la position de l'image. Percentages est relatif aux dimension de l'élément qui le contient et a la particularité de positionner les coordonnées de l'image aux coordonnées de l'élément. Exemple: les coordonnées (20% et 65%) de l'image seront positionnées aux coordonnées (20% et 65%) de l'élément!. La position horizontale est en premier spécifiée suivit pas la position verticale. Length place quant à lui le coin supérieur de l'image aux coordonnées x / y de l'élément.
Si seule la valeur horizontale est donnée, la position verticale sera à 50%. La combinaison de percentages et lengths est permis pouvu qu'une valeur négative est donnée. Exemple: 10% -2cm est permit. Si l'image est fixe à la page (canvas) l'image est positionnée relativement au canevas au lieu de l'élément.
Il est préférable d'utiliser la propriété background au lieu de la propriété background-position.
top left = left top = 0% 0%
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = right bottom = 100% 100%
|
Valeurs possibles : [< percentages > | < lengths >]{1,2} | [top | center | bottom] || [left | center | right] Valeur initiale : 0% 0% S'applique à : Un bloc (Block-level) et "replaced elements" Inherited : Non |
BODY { background: white url(image.gif); background-position: center } |
|