62
Maîtrise des CSS
Les.dégradés.sont.très.en.vogue..Imaginons.donc.que.vous.souhaitiez.plutôt.appliquer.un.
dégradé.vertical..Pour.cela,.créez.une.image.de.dégradé.étroite.mais.très.longue,.puis.appliquez-la.à.l’élément.body.de.la.page.en.la.répétant.horizontalement.
body {
background-image: url(/img/gradient.gif);
background-repeat: repeat-x;
}
Comme.le.dégradé.possède.une.hauteur.fixe,.il.s’arrête.brusquement.si.le.contenu.de.la.page.est.
plus.long.que.la.hauteur.de.l’image..On.peut,.certes,.créer.une.image.très.longue,.qui.se.fond.
dans.une.zone.de.couleur.unie.couvrant.tout.le.bas.de.l’image,.mais.il.est.difficile.de.prédire.
systématiquement. la. longueur. des. pages.. Le. plus. simple. est. donc. d’ajouter. une. couleur.
d’arrière-plan.également..Les.images.d’arrière-plan.viennent.toujours.se.placer.par-dessus.la.
couleur.d’arrière-plan,.si.bien.que.lorsque.l’image.s’interrompt,.c’est.la.couleur.d’arrièreplan.qui.prend.le.relais..Si.vous.choisissez.une.couleur.d’arrière-plan.identique.à.celle.du.bas.
du.dégradé,.la.transition.entre.l’image.et.la.couleur.d’arrière-plan.est.parfaitement.invisible..
body {
background-image: url(/img/gradient.gif);
background-repeat: repeat-x;
background-color: #ccc;
}
Les. mosaïques. d’images. peuvent. être. utiles. mais,. la. plupart. du. temps,. vous. souhaiterez.
ajouter.vos.images.sans.les.répéter.dans.la.page..Par.exemple,.supposons.que.vous.vouliez.
faire. commencer. votre. page. web. par. une. grande. image. représentant. votre. marque..Vous.
pourriez.ajouter.directement.l’image.à.la.page.et,.dans.bien.des.cas,.il.s’agirait.de.la.bonne.
méthode,.mais.si.l’image.ne.contient.aucune.information.et.n’est.destinée.qu’à.des.fins.de.
présentation,. il. est. préférable. de. la. séparer. du. reste. du. contenu..Vous. pouvez. le. faire. en.
créant.un.hook.(une.sorte.de.point.d’attache).pour.elle.dans.le.code.HTML.et.en.appliquant.
cette.image.avec.des.CSS..Dans.l’exemple.suivant,.j’ai.ajouté.une.div.vide.au.balisage.et.je.
lui.ai.donné.l’ID.branding..Vous.définissez.ensuite.les.dimensions.de.la.div.pour.les.rendre.
identiques.à.celles.de.l’image,.en.l’appliquant.comme.arrière-plan,.sans.répétition.
#branding {
width: 700px;
height: 200px;
background-image:url(/img/branding.gif)
background-repeat: no-repeat;
}
Enfin,.vous.pouvez.définir.la.position.de.l’image.d’arrière-plan..Par.exemple,.supposons.que.
vous.souhaitiez.ajouter.une.puce.à.chaque.titre.de.votre.site.(voir.Figure 4.1)..Vous.pouvez.
alors.procéder.de.la.manière.suivante :
h1 {
padding-left: 30px;
background-image: url(/img/bullet.gif);
background-repeat: no-repeat;
background-position: left center;
}
Maîtrise des CSS
Les.dégradés.sont.très.en.vogue..Imaginons.donc.que.vous.souhaitiez.plutôt.appliquer.un.
dégradé.vertical..Pour.cela,.créez.une.image.de.dégradé.étroite.mais.très.longue,.puis.appliquez-la.à.l’élément.body.de.la.page.en.la.répétant.horizontalement.
body {
background-image: url(/img/gradient.gif);
background-repeat: repeat-x;
}
Comme.le.dégradé.possède.une.hauteur.fixe,.il.s’arrête.brusquement.si.le.contenu.de.la.page.est.
plus.long.que.la.hauteur.de.l’image..On.peut,.certes,.créer.une.image.très.longue,.qui.se.fond.
dans.une.zone.de.couleur.unie.couvrant.tout.le.bas.de.l’image,.mais.il.est.difficile.de.prédire.
systématiquement. la. longueur. des. pages.. Le. plus. simple. est. donc. d’ajouter. une. couleur.
d’arrière-plan.également..Les.images.d’arrière-plan.viennent.toujours.se.placer.par-dessus.la.
couleur.d’arrière-plan,.si.bien.que.lorsque.l’image.s’interrompt,.c’est.la.couleur.d’arrièreplan.qui.prend.le.relais..Si.vous.choisissez.une.couleur.d’arrière-plan.identique.à.celle.du.bas.
du.dégradé,.la.transition.entre.l’image.et.la.couleur.d’arrière-plan.est.parfaitement.invisible..
body {
background-image: url(/img/gradient.gif);
background-repeat: repeat-x;
background-color: #ccc;
}
Les. mosaïques. d’images. peuvent. être. utiles. mais,. la. plupart. du. temps,. vous. souhaiterez.
ajouter.vos.images.sans.les.répéter.dans.la.page..Par.exemple,.supposons.que.vous.vouliez.
faire. commencer. votre. page. web. par. une. grande. image. représentant. votre. marque..Vous.
pourriez.ajouter.directement.l’image.à.la.page.et,.dans.bien.des.cas,.il.s’agirait.de.la.bonne.
méthode,.mais.si.l’image.ne.contient.aucune.information.et.n’est.destinée.qu’à.des.fins.de.
présentation,. il. est. préférable. de. la. séparer. du. reste. du. contenu..Vous. pouvez. le. faire. en.
créant.un.hook.(une.sorte.de.point.d’attache).pour.elle.dans.le.code.HTML.et.en.appliquant.
cette.image.avec.des.CSS..Dans.l’exemple.suivant,.j’ai.ajouté.une.div.vide.au.balisage.et.je.
lui.ai.donné.l’ID.branding..Vous.définissez.ensuite.les.dimensions.de.la.div.pour.les.rendre.
identiques.à.celles.de.l’image,.en.l’appliquant.comme.arrière-plan,.sans.répétition.
#branding {
width: 700px;
height: 200px;
background-image:url(/img/branding.gif)
background-repeat: no-repeat;
}
Enfin,.vous.pouvez.définir.la.position.de.l’image.d’arrière-plan..Par.exemple,.supposons.que.
vous.souhaitiez.ajouter.une.puce.à.chaque.titre.de.votre.site.(voir.Figure 4.1)..Vous.pouvez.
alors.procéder.de.la.manière.suivante :
h1 {
padding-left: 30px;
background-image: url(/img/bullet.gif);
background-repeat: no-repeat;
background-position: left center;
}