Fermer fl Glossaire fl CSS
Glossaire

sp  sp   sp
Technique : CSS
background-position
Internet Explorer Netscape Opera Mozilla
4.0+ 6.0+ 3.0+ oui
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 }

Conception Oznog co. Multimédia