<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { /* définition de la page */
background:50px 1px url(dragon2.gif) no-repeat fixed ; /*
dragon en image de fond */
font-family:verdana } /* fonte de la page */
.boite { /* boite centrale affichant une couleur de fond */
margin : 2% 25% 0% 25% ; /* marge extérieure */
padding:0% ; /* marge intérieure */
border:1px solid black ; /* bordure de la boite */
height:200% ; /* hauteur de la boite par rapport à la
boite parent (ici la page) */
background:url(transparence-fond.gif)} /* image semi-transparente
en fond de boite */
</style>
</head>
<body>
<div class="boite"> <!-- affichage de la boite recouvrant
le dragon-->
<p>contenu quelconque de la boite.</p>
<p>Faite défiler la page vers le bas !</p>
<p>L'image reste fixe et défile sous la boite, en
transparence</p>
<p>la transparence est obtenue grace à un GIF transparent.</p>
</div>
</body>
</html>
COMMENTAIRES
Ce 3ième script est presque le même que dans l'exemple 2.
Une petite différence : le carré semi-tranparent est orange, au lieu d'être blanc.
Une grosse différence : l'image de fond du body (le dragon) a un attribut :fixed. Elle ne bouge donc pas quand on descend (scroll) vers le bas : la boite défile donc par dessus l'image du dragon.
Pour télécharger le carré semi-transparent orange.
Marche avec IE 5.0 et plus, avec les navigateurs Gecko (Netscape 6 et +, Mozilla,...) ou Opéra. Ne marche pas avec Netscape 4.