Accueil    CSS    Propriété Background-position
 



style css background-position  Style CSS background-position

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété background-position permet de déterminer la position de l'image d'arrière plan par rapport à son élément conteneur. Ce positionnement se fait en précisant le type d'alignement horizontal puis séparé par un espace le type d'alignement vertical.

Cette propriété est également très importante pour la mise en place de sprites :
Un sprite est une image englobant elle-même plusieurs images, lesquelles sont utilisées par la feuille de style comme arrières-plan de différents éléments.
L'utilisation des sprites est une étape d'optimisation du temps de chargement des pages web car elle permet de limiter le nombre de requêtes http pour obtenir les images lors du rendu d'une page.



Propriétés pour le style background-position :




Propriété Définition Valeurs CSS
background-position Détermine la position horizontale et verticale dans l'élément de l'image utilisée comme arrière plan qui est par défaut la partie supérieure gauche bottom
center
left
right
top
%
valeur
inherit
CSS 1


Exemple d'utilisation du style css background-position :





<div style="width:400px; height:120px; border:solid 1px black;
   background-image:url(exemples/exemple-css-image.png);
   background-repeat:no-repeat; background-position:left top;">
   Alignement horizontal gauche
   Alignement vertical haut
</div>

<div style="width:400px; height:120px; border:solid 1px black;
   background-image:url(exemples/exemple-css-image.png);
   background-repeat:no-repeat; background-position:center center;">
   Alignement horizontal centré
   Alignement vertical centré
</div>

<div style="width:400px; height:120px; border:solid 1px black;
   background-image:url(exemples/exemple-css-image.png);
   background-repeat:no-repeat; background-position:right bottom;">
   Alignement horizontal droit
   Alignement vertical bas
</div>



Alignement horizontal gauche
Alignement vertical haut

Alignement horizontal centré
Alignement vertical centré

Alignement horizontal droit
Alignement vertical bas