22 novembre 2009

Une image en fond de page (1)

Pour afficher une image dans le fond d'une page, il suffit d'ajouter la propriété "background-image" dans l'élément "body" de votre feuille de style. Sa valeur sera l'adresse internet (URL) de l'image.

On aura donc :

body {
          background-image: url(URL de l'image);
}

Exemple (modèle lily) :

body {
          background-image: url(http://i32.tinypic.com/34y1i5f.jpg);
}

D'autres propriétés peuvent être ajoutées :
"background-position", avec différentes valeurs permettant de positionner l'image sur la page ;
"background-repeat", pour indiquer si l'image doit être répétée ou non ;
"background-attachment" pour indiquer si l'image doit être fixe ou non.

Habituellement, on utilise une écriture raccourcie, la propriété "background", avec toutes les valeurs indiquées ci-dessus séparées par un espace.

Exemple :
Ecriture normale :

body {
          background-image: url(http://i32.tinypic.com/34y1i5f.jpg);
          background-position: top left;
          background-repeat: repeat-x;
          background-attachment: scroll;
}

Ecriture raccourcie :

body {
          background: url(http://i32.tinypic.com/34y1i5f.jpg) top left repeat-x scroll;
}



Nota : la propriété "background-color" qui ne se rapporte pas à l'image doit être indiquée. Elle permet de recouvrir la surface de la page là où ne va pas l'image (et au cas où l'image ne se chargerait pas).