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).
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.
Cliquez ici pour une première démonstration. On voit immédiatement les limites de l'exercice :
height:100% pour s'adapter à une hauteur variable, mais au
prix d'une déformation qui pourra devenir intolérable.
Cliquez ici pour
voir l'effet, au cas où vous ne seriez pas convaincu d'avance
(vous pouvez ouvrir les deux popups en même temps). Accordons
toutefois que cette déformation peut être plus facilement
acceptée en
cas d'une image de fond purement abstraite.
Charles