63
Utilisation des effets d’arrière‑plan
Figure 4.1
Création d’une puce
à l’aide d’une image
d’arrière-plan.
Mon Titre
padding-left : 30px
centre gauche
Les.deux.derniers.mots-clés.indiquent.le.positionnement.de.l’image..Dans.le.cas.présent,.
l’image.sera.positionnée.à.gauche.de.l’élément.et.centrée.verticalement..En.plus.des.motsclés,.vous.pouvez.définir.la.position.de.l’image.d’arrière-plan.à.l’aide.d’unités.comme.des.
pixels.ou.des.pourcentages.
Si.vous.définissez.la.position.de.l’arrière-plan.en.pixels.ou.en.cadratins.(em),.vous.positionnez. le. coin. supérieur. gauche. de. l’image. en. le. décalant. du. nombre. d’unités. spécifié,.
par.rapport.au.coin.supérieur.gauche.de.l’élément..Si.vous.spécifiez.une.position.verticale.
et.horizontale.de.20 pixels,.le.coin.supérieur.gauche.de.l’image.apparaît.ainsi.à.20 pixels.
du.coin.supérieur.gauche.de.l’élément..Le.positionnement.de.l’arrière-plan.en.pourcentage.
fonctionne.un.peu.différemment..Au.lieu.de.positionner.le.coin.supérieur.gauche.de.l’image,.
il.utilise.un.point.correspondant.dans.l’image..Si.vous.définissez.une.position.verticale.et.
horizontale.de.20 %,.vous.positionnez.en.fait.un.point,.situé.à.20 %.du.coin.supérieur.gauche.
de. l’image,. afin. de. le. placer. à. 20 %. du. coin. supérieur. gauche. de. l’élément. parent. (voir.
Figure 4.2).
20px
20 %
20px
20 %
(20 %, 20 %)
x
Positionnement de l'arrière-plan en px Positionnement de l'arrière-plan en %
(0,0)
x
Figure 4.2
Lorsque vous positionnez des images d’arrière-plan en utilisant des pixels, c’est le coin supérieur gauche
de l’image qui est pris comme référence. Lorsque vous effectuez un positionnement en pourcentage, c’est
la position correspondante dans l’image qui est prise comme référence.
Si.vous.souhaitez.positionner.le.précédent.exemple.de.puces.avec.des.pourcentages.et.non.des.
mots-clés,.vous.pouvez.fixer.la.position.verticale.à.50 %.pour.centrer.l’image.de.la.puce :
h1 {
padding-left: 30px;
Utilisation des effets d’arrière‑plan
Figure 4.1
Création d’une puce
à l’aide d’une image
d’arrière-plan.
Mon Titre
padding-left : 30px
centre gauche
Les.deux.derniers.mots-clés.indiquent.le.positionnement.de.l’image..Dans.le.cas.présent,.
l’image.sera.positionnée.à.gauche.de.l’élément.et.centrée.verticalement..En.plus.des.motsclés,.vous.pouvez.définir.la.position.de.l’image.d’arrière-plan.à.l’aide.d’unités.comme.des.
pixels.ou.des.pourcentages.
Si.vous.définissez.la.position.de.l’arrière-plan.en.pixels.ou.en.cadratins.(em),.vous.positionnez. le. coin. supérieur. gauche. de. l’image. en. le. décalant. du. nombre. d’unités. spécifié,.
par.rapport.au.coin.supérieur.gauche.de.l’élément..Si.vous.spécifiez.une.position.verticale.
et.horizontale.de.20 pixels,.le.coin.supérieur.gauche.de.l’image.apparaît.ainsi.à.20 pixels.
du.coin.supérieur.gauche.de.l’élément..Le.positionnement.de.l’arrière-plan.en.pourcentage.
fonctionne.un.peu.différemment..Au.lieu.de.positionner.le.coin.supérieur.gauche.de.l’image,.
il.utilise.un.point.correspondant.dans.l’image..Si.vous.définissez.une.position.verticale.et.
horizontale.de.20 %,.vous.positionnez.en.fait.un.point,.situé.à.20 %.du.coin.supérieur.gauche.
de. l’image,. afin. de. le. placer. à. 20 %. du. coin. supérieur. gauche. de. l’élément. parent. (voir.
Figure 4.2).
20px
20 %
20px
20 %
(20 %, 20 %)
x
Positionnement de l'arrière-plan en px Positionnement de l'arrière-plan en %
(0,0)
x
Figure 4.2
Lorsque vous positionnez des images d’arrière-plan en utilisant des pixels, c’est le coin supérieur gauche
de l’image qui est pris comme référence. Lorsque vous effectuez un positionnement en pourcentage, c’est
la position correspondante dans l’image qui est prise comme référence.
Si.vous.souhaitez.positionner.le.précédent.exemple.de.puces.avec.des.pourcentages.et.non.des.
mots-clés,.vous.pouvez.fixer.la.position.verticale.à.50 %.pour.centrer.l’image.de.la.puce :
h1 {
padding-left: 30px;