84
Maîtrise des CSS
Pour.réaliser.cet.effet,.vous.devez.d’abord.créer.plusieurs.images.d’arrière-plan..Ici,.nous.
avons.créé.une.image.de.feuillage.sur.un.arrière-plan.vert,.puis.deux.images.de.feuillage.
plus.lointaines.sur.un.arrière-plan.transparent..Les.images.du.premier.plan.et.du.plan.intermédiaire. peuvent. ainsi. être. superposées. l’une. à. l’autre. ainsi. qu’à. l’arrière-plan,. sans. en.
masquer.la.vue.
Le. principal. arrière-plan. est. appliqué. à. l’élément. body.. Si. vous. n’utilisez. pas. d’images.
d’arrière-plan.multiples.en.CSS 3,.vous.devez.cependant.ajouter.deux.nouveaux.éléments.
auxquels.lier.ces.arrière-plans..Le.contenu.de.la.page.doit.ensuite.venir.se.placer.devant.ces.
éléments.afin.d’interagir.avec..Vous.pourriez.placer.la.div.de.premier.plan.devant.le.contenu,.
mais.vous.en.bloqueriez.partiellement.le.contenu.et.il.deviendrait.plus.difficile.d’interagir.
avec..La.structure.du.code.doit.donc.ressembler.à.ceci :



La.première.chose.à.faire.est.d’ajouter.l’arrière-plan.principal.à.l’élément.body..Il.faut.que.
cette.image.se.répète.à.l’horizontale..Vous.devrez.donc.attribuer.la.valeur.repeat-x.à.la.
propriété.image-repeat..Il.faut.aussi.que.l’élément.body.prenne.la.couleur.de.l’arrièreplan,.qui.se.trouve.être.vert.clair..Enfin,.il.faut.décaler.l’image.horizontalement.de.20 %.
par.rapport.à.la.taille.de.la.fenêtre..C’est.là.que.la.magie.fait.son.effet..Lorsque.la.fenêtre.
se.redimensionne,.l’image.d’arrière-plan.change.de.position.et.elle.semble.se.déplacer.dans.
l’écran..
body {
background-image: url(/img/bg-rear.jpg);
background-repeat: repeat-x;
background-color:#d3ff99;
background-position: 20% 0;
}
Vous.devez.maintenant.en.faire.de.même.avec.les.images.de.plan.intermédiaire.et.de.premier.
plan,.en.choisissant.des.pourcentages.plus.élevés.pour.qu’elles.se.déplacent.plus.rapidement.
et. suscitent. ainsi. un. effet. de. profondeur.. Nous. avons. décidé. de. fixer. la. position. du. plan.
intermédiaire.à.40 %.et.celle.du.premier.plan,.chichement,.à.150 %.(voir.Figure 4.27)..Vous.
pouvez.jouer.sur.ces.valeurs.pour.générer.l’effet.qui.vous.convient..
body {
background-image: url(/img/bg-rear.jpg);
background-repeat: repeat-x;
background-color:#d3ff99;
background-position: 20% 0;
}
.midground {
background-image: url(/img/bg-mid.png);
background-repeat: repeat-x;
background-color: transparent;