Positionnement d'une image d'arrière-plan

 

"background-position" est la propriété qui permet de définir avec précision l'emplacement d'une image dans une page ou encore dans des éléments de type bloc. Quand on spécifie une image d'arrière-plan, cette propriété indique la position initiale de celle-ci. Cette propriété ne bénéficie pas de la règle d'hérédité.

 

Valeurs supportées

Les mots-clés

top = image au centre/haut de la page ou du bloc.

center = image au centre/centre de la page ou du bloc.

bottom = image au centre bas de la page ou du bloc..

right = image au centre/droit de la page ou du bloc.

left = image au centre/gauche de la page ou du bloc.

pourcentage  pourcentage = par paire, avec par exemple  0% 0%  qui est la valeur par défaut, et qui correspond exactement au coin haut / gauche de l'image qui se trouve alignée sur le coin haut / gauche de la bordure de la boîte. La valeur exprimée en pourcentage se rapporte à la taille de la boîte elle-même.

longueur  longueur = par paire, avec par exemple  5cm 5cm   c'est-à-dire que le coin haut / gauche de l'image se place à 5cm vers la droite et à 5cm vers le bas par rapport au coin haut / gauche de la boîte.

Les valeurs de longueur utilisables sont : cm, em, in, mm, px, pt, pc.

En pourcentage ou en longueur, lorsqu'on ne donne qu'une seule valeur, celle-ci concerne la position horizontale, et la position verticale est automatiquement fixée à 50%.

Lorsqu'on donne deux valeurs avec toujours un espace entre les deux, il est possible de combiner des valeurs de pourcentage avec des valeurs de longueur (ex. 50% 2cm). Les positions négatives sont permises. Par contre il n'est pas possible de combiner des mots-clés avec des valeurs de pourcentage ou de longueur.

1 - top left = left top =0% 0% de la page ou du bloc.

2 - top center = center top = 0% 50% de la page ou du bloc.

3 - top right = right top = 0% 10% de la page ou du bloc.

4 - center left = left center = 50% 0% de la page ou du bloc.

5 - center center = 50% 50% de la page ou du bloc.

6 - center right = right center = 100% 50% de la page ou du bloc.

7 - bottom left = left bottom = 100% 0% de la page ou du bloc.

8 - bottom center = center bottom = 100% 50% de la page ou du bloc.

9- bottom right = right bottom = 100% 100% de la page ou du bloc.

La propriété "background-position" n'est en principe associée qu'à " background-repeat: no-repeat", mais rien n'interdit de l'associer avec :

background-repeat: repeat-x = répétition horizontale de l'image.(exemple 10)
background-repeat: repeat-y = répétition verticale de l'image.

---

 

Code dans HEAD

.exemple1 {
background-position: top left ;
background-image: url('aimages/v143.jpg') ;
background-repeat: no-repeat ;
border: 1px solid #990000 ;
width: 300px ;
height: 200px ; }

En bleu le chemin de votre image, en vert l'image est fixe et non répétée, en rouge une boîte de 300px de large, 200px de haut, bordée d'un trait fin de 1px solide et noir.

 

---

 

Exemples contrôlés sous IE 6 et N 7

exemple 1 - ci-dessus : background-position: top left = image placée et définie à 0% du bord gauche et à 0% du sommet de la boîte.

exemple 2 - ci-dessus : background-position: top center = image placée et définie à 50% du bord gauche et à 0% du sommet de la boîte.

exemple 3 - ci-dessus : background-position: top right = image placée et définie à 100% du bord gauche et à 0% du sommet de la boîte.

exemple 4 - ci-dessus : background-position: center left = image placée et définie à 0% du bord gauche et à 50% du sommet de la boîte.

exemple 5 - ci-dessus : background-position: center center = image placée et définie à 50% du bord gauche et à 50% du sommet de la boîte.

exemple 6 - ci-dessus : background-position: center right = image placée et définie à 100% du bord gauche et à 50% du sommet de la boîte.

exemple 7 - ci-dessus : background-position: bottom left = image placée et définie à 0% du bord gauche et à 100% du sommet de la boîte.

exemple 8 - ci-dessus : background-position: bottom center = image placée et définie à 50% du bord gauche et à 100% du sommet de la boîte.

exemple 9 - ci-dessus : background-position: bottom right = image placée et définie à 100% du bord gauche et à 100% du sommet de la boîte.

 

---

 

exemple 10 - ci-dessus : background-position: background-repeat: repeat-x ; = image placée et définie à 100% du sommet de la boîte et répétée horizontalement.

 

---

 

Il est possible de définir une image fixe placée dans la page (comme page 8d) mais cette fois positionnée où bon vous semble, par exemple pour placer un logo en filigrane dans le centre de votre fichier, avec le code suivant placé dans HEAD: