Background

Dans les CSS, il sera possible de définir le fond des objets (comme body, div, balise de titre hx, blockquote, ul, ancrage a, ...)

Définir une couleur ou une image de fond

Pour définir une couleur de fond.

background-color:couleur;

Pour définir une image de fond:

background-image:url(chemin_et_nom_fichier);

Avec url contenant le chemin de l'image (Attention à la taille du fichier !), par exemple ../image/monimage.jpg

Fixer l'image de fond

Pour que le fond de l'image soit fiwe, même lorsque le visiteur utilise les ascenseurs, utilisez:

background-attachment:fixed;

Désactiver ou activer la mosaïque

Lorsque l'image de fond ne tiend pas sur la totalité de l'écran, il est possible de l'afficher en mosaïque,

background-repeat:repeat;

ou au contraire, de le désactiver !

background-repeat:no-repeat;

Mais vous pouvez aussi limiter la répétitions en verticale avec repeat-y ou en horizontale avec repeat-x

Deux autres valeurs sont possibles:

initial pour prendre la valeur par défaut

inherit pour hériter de la propriété du parent.

Positionner l'image

Positionner en haut à gauche: background-position:left top; ou en utilisant les positions sous forme de valeur: background-position:0% 0%;

Positionner en haut à droite: background-position:right top; ou par valeur: background-position:100% 0%;

Et donc l'équivalent pour le bas...à gauche ou à droite: background-position:right bottom; ou background-position:100% 100%; pour en bas à droite.

Et enfin pour le centrer: background-position:center center; ou background-position:50% 50%;

Vous aurez bien entendu plus de possibilité avec les valeurs !

0% à gauche ou en haut suivant le cas, 100% à droite ou en bas. Les valeurs intermédiaires plus allez plus ou moins d'un côté ou de l'autre !

Remarques

Vous pouvez trouver des CSS avec une ligne regroupant toutes les informations background. Je ne trouve pas cela forcement bien lisible pour une maintenance, mais cela existe !

body {

background: white url(mon_image_de_fond.jpg) no-repeat center center;

}

Annexes

Multiples images dans un background grâce à CSS3