Utilisation de background

Profil : Débutant
Technologie : CSS
Thème : Mise en page
Auteur : Pascale Lambert
Mise à jour : 21/03/2005

En bref

Comment utiliser la propriété CSS background pour gérer des images d'arrière-plan ?

Mettre une image de fond dans une page web est un exercice très répandu. Avec tout éditeur de page HTML, l'option classique est de générer un code du type : <body background="images/image_de_fond.png">, auquel on peut même ajouter bgproperties="fixed" qui rend fixe l'image de fond ; mais cet attribut ne fonctionne qu'avec MSIE. Avec les feuilles de style on peut obtenir beaucoup plus, tout en séparant la présentation (la mention de cette image) de la structure (l'élément body).

Avertissements préliminaires :

Une image de fond doit être légère. Comprenez par là qu'une image de 20 ko c'est déjà beaucoup : cela peut être long à charger et provoquer des problèmes d'affichage.
Attention aux difficultés de lecture qu'une image de fond trop contrastée peut provoquer.
Attention aussi à toujours prendre une couleur de fond différente de celle de la police de caractère, car en attendant que l'image de fond se charge, on ne verra rien. Le résultat sera également illisible si l'utilisateur a désactivé l'affichage des images dans son navigateur, ou si l'image vient à être indisponible.

Pour illustrer tout cela, visionnez ce mauvais exemple : la photo fait 53 ko ; la couleur utilisée, pour la police de caractère et le fond, est blanche.

Code CSS de base

L'image de fond se déclare en général pour l'élément body (corps de page), mais on peut aussi l'appliquer à un bloc (<div></div>), ou un titre (<hx></hx>), un lien (<a></a>) afin de créer un bouton, etc.

Prenons l'exemple du corps de page. La syntaxe CSS de base sera celle-ci :

body {
color:black;
background-color:white;
background-image:url(images/image_de_fond.png);
margin:0;
}

color renseigne la couleur de la police de caractère ;
background-color est de la couleur de fond de page ;
background-image:url() est bien-sûr l'adresse de l'image choisie pour le fond de page. Attention : cette URL est relative à celle du fichier CSS, et non à celle du document (X)HTML.
Pour éviter des problèmes de marges parasites, on peut les fixer à 0 pixels à l'aide de margin:0.

Sans plus de renseignements, l'image de fond apparaît en mosaïque et défile en même temps que le texte.

Comme d'habitude, cette syntaxe CSS est à mettre dans l'en-tête de la page (entre les balises <head></head>) ou dans une feuille de style externe.

Visionner l'exemple 2.

Fond de page fixe

Pour que le fond de page devienne fixe, on rajoutera dans le code :

background-attachment:fixed;

Visionner l'exemple 3.

Positionner l'image

On peut aussi empêcher la mosaïque grâce à la propriété background-repeat et placer ainsi l'image dans une partie très précise de l'écran.

Par défaut, l'image se positionne en haut à gauche de l'écran :

body {
color:black;
background-color:white;
background-image:url(images/image_de_fond.png);
background-repeat:no-repeat;
}

Visionner l'exemple 4.

Si l'on veut qu'elle se place en haut à droite, on rajoutera le code :
```
background-position:right top;
```
ou bien :
```
background-position:100% 0%;
```
Visionner l'exemple 5.
Pour une position au centre de la page, cela donnera :
```
background-position:center center;
```
ou bien :
```
background-position:50% 50%;
```
Visionner l'exemple 6.
Pour une position en bas à droite :
```
background-position:right bottom;
```
ou bien :
```
background-position:100% 100%;
```
Visionner l'exemple 7.

Remarques

background-repeat accepte 4 valeurs :

no-repeat (image unique) ;
repeat-x pour une répétition de l'image uniquement horizontale ;
repeat-y pour une répétition uniquement verticale ;
repeat pour la mosaïque complète.

Vous aurez remarqué, bien sûr, que les pourcentages dans le background-position offrent plus de lattitude que les attributs right, center, left et top, center, bottom.

Notons enfin qu'on peut aussi cumuler ces différentes informations dans un unique background. Exemple :

body {
background: white url(image_de_fond.png) no-repeat right bottom;
}