Le principe

Les propriétés CSS ne satisfaisant pas nos exigences, nous allons devoir utiliser une autre technique. Pour cela, nous utiliserons une classique image (balise <img ... />). La méthode consistera en fait à lui donner des dimensions à 100%. Elle s'étirera donc automatiquement en fonction des éventuels changements de dimensions.

Puisqu'il s'agit d'un arrière plan, nous allons devoir placer du contenu par dessus. Pour cela, nous allons devoir modifier le mode de positionnement de ce contenu en fonction du contexte.

L'arrière plan d'une page

Pour cela nous allons d'abord supprimer les éventuelles marges du corps de la page. Nous lui donnerons également des dimensions à 100% sans quoi cette astuce ne fonctionnera pas sous certaines versions d'Internet Explorer.

Nous placerons ensuite note image de fond dans la première ligne de contenu de l'élément <body>. Les dimensions de cette images seront définies à 100%.

Enfin, pour que le contenu se place par dessus cette image, on pourra le placer dans un élément de type <div> (ou tout autre conteneur) que nous positionnerons en absolute.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 <head>
 <title>Un exemple</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
 
   body,html
   {
     /* Indispensables pour certain navigateurs */
     width:100%;
     height:100%;
     /* On retire les marges éventuelles */
     margin:0;
     padding:0;
    }
 
    #background
    {
     width:100%;
     height:100%;
    }
 
    #content
    {
     position:absolute;
     left:0;
     top:0;
    }
  </style>
 </head>
 <body>
   <img src="images/background.png" alt="" id="background" />
   <div id="content">
     <p>Le contenu de la page se place dans ce div!</p>
   </div>
 </body>
</html>

Vous pouvez vérifier le bon fonctionnement de cette astuce grâce à l'aperçu que je vous propose. Redimensionnez la fenêtre et observez l'image prendre les bonnes dimensions. Vous remarquerez en passant que les proportions de l'image ne sont pas forcément respectées. Si vous souhaitez conserver les bonnes proportions, il vous suffira de ne préciser la dimension 100% que pour la hauteur ou la largeur de l'image.

Vous remarquerez peut être que cette page n'est pas valide. En effet, une balise <img ... /> ne peut normalement pas apparaître dans ce contexte, il faudrait logiquement qu'elle soit placé entre des éléments <h1> ou <p> par exemple. Cependant, en plus d'être impossible à justifier à cette endroit, l'utilisation de ces balises ne permet pas d'obtenir le comportement attendu sur certain navigateurs.

Remarquez enfin que nous avons laissé le texte alternatif de l'image vide. Ceci s'explique simplement : aucun texte alternatif n'aurait de sens à cette endroit. De plus, si pour une raison ou une autre il apparaissait, il pourrait nuire à la bonne lecture de la page par le visiteur (superposition de texte).

Conclusion

Il est probablement préférable d'utiliser cette astuce avec modération. Je n'ai pas eu l'occasion de la tester sur beaucoup de navigateurs. Alsacreations nous indique que cette technique fonctionne sur les navigateurs suivant : sur Windows IE5, IE5.5, IE6, Mozilla Firebird 0.7, Mozilla Firefox 0.8 et Opera 7.23. Pour ma part, j'ai pu vérifier avec les versions Linux de Firefox 2.0 et Opera.

Vous pourrez également appliquer cette méthode à d'autre éléments de votre page. La technique restant rigoureusement la même.