Comment avoir une image de fond qui prenne toute seule les dimensions de la fenêtre du navigateur ?

On sait que les images de fond ont volontiers la manie de se répéter de manière à tapisser toute la fenêtre du navigateur et l'effet «mosaïque» qui en résulte est rarement heureux. Nous avons déjà discuté de la façon d'empêcher son apparition ou des mesures à prendre pour en tirer profit, mais bien des débutants continuent à rêver d'une image de fond qui prendrait automatiquement la taille de l'espace disponible.

L'emploi des styles (CSS) permet de réaliser ce rêve... et d'en voir les limites.

On n'y arrive pas au moyen d'une propriété de derrière les fagots du style background, mais par une technique de calques superposés et une spécificité du style width:100% pour une image en CSS. Ce style donne à l'image la largeur du bloc père de l'image, et la hauteur s'adapte en proportion (notez que c'est complètement différent de ce qui se passe en HTML classique, où width="100%" affiche l'image à ses dimensions nominales).

La technique consistera donc à ouvrir l'image de fond directement dans le BODY avec un width:100%, puis à placer l'ensemble du site dans un calque positionné en haut à gauche, suivant le code suivant :
<body style="margin:0px; padding:0px;">
  <img src="fond.jpg" style="width:100%;">
  <div style="position:absolute; top:0px; left:8px;">
  <p>La page commence ici.....
  </div>
</body>
Avec Dreamweaver, commencez immédiatement par ouvrir l'image, puis, dans l'inspecteur de propriétés, effacez la case H (hauteur) et mettez 100% dans la case L (largeur). Ouvrez ensuite un calque pour mettre la suite de la page.

Démonstrations

Cliquez ici pour une première démonstration. On voit immédiatement les limites de l'exercice :

Charles