UNE IMAGE FIGEE A L'ECRAN SOUS IE

Faite descendre la page grace aux ascenseurs ! l'image ne bouge pas.

CODE SOURCE CSS ET HTML

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">

body { /* l'image se met en arrière plan de la page entière. Elle aurait pu ne s'appliquer qu'à une boite */
background: /* fonction gérant l'arrière-plan */
500px 100px /* la 1er valeur est la position par rapport à la gauche de l'écran, la seconde par rapport au haut */
url(opera.png) /* le nom et l'adresse de l'image */
no-repeat /* l'image n'apparait qu'une fois */
fixed} /* l'image est fixée sur le fond d'écran */

.boite {width:20% ; height:800px ; border:2px solid black} /* boite servant à faire défiler l'écran, en débordant de la page */

</style>
</head>

<body>

<p class="boite">Contenu quelconque du body</p>

</body>
</html>

 

Pour tester ce script


COMMENTAIRES

Les feuilles de styles permettent de définir un fond d'écran, grace à la fonction background-image : url (image.jpg). En général, l'image se répète pour couvrir tout l'écran. On peut cependant demander à ce que l'image ne s'affiche qu'une seule fois, dans une zone précise de l'écran.
Par défaut, elle défile avec la page, et semble donc apparaitre toujours au même endroit.

On peut aussi demander à ce qu'elle ne défile pas avec la page. C'est le cas ici. L'image reste alors fixe derrière la page. Elle apparaît et disparait en fonction de ce qui se trouve devant elle.

Ici, la fonction Background a été écrite de manière condensée. On aurait aussi pu l'écrire :

body {background-image:url(opera.png) ;
background-attachement:fixed ;
background-repeat:no-repeat ;
background-position:500px 100px}

Attention, on ne peut définir qu'une seule image d'arrière plan par boite (l'écran étant par défaut une boite, celle qui est traitée ici), et on ne peut y placer l'image qu'à un seul endroit. Si vous voulez afficher plusieures images de fonds, il faudra plusieurs boites.

On ne peut pas définir la taille de l'image insérée par la fonction background. C'est la taille réelle de l'image qui est prise.

Un autre exemple d'image fixe en fond d'écran dans le 3ième exemple sur les effets de transparence.