Les feuilles de styles CSS
DEUXIÈME PARTIE
92
Par défaut, cette image sera répétée en damier (ou papier peint) à partir du coin
supérieur gauche. On peut toutefois modifier ce comportement en jouant sur les
autres attributs CSS de la propriété background.
À nouveau, l’absence d’un mécanisme d’héritage a peu d’impact : le comportement
par défaut étant l’absence de tout fond, les éléments imbriqués apparaîtront comme
ceux de leurs parents.
Deux valeurs sont possibles : none et url(chemin-vers-l’image). Voici des exemples :
Soulignons l’absence inhabituelle d’apostrophes simples ou doubles autour des noms
des images.
Positionner l’image à sa convenance
Avec background-position, on pourra placer dans un élément une image d’arrièreplan définie par background-image. Cet attribut s’utilise surtout en l’absence de
répétition (background-repeat).
La première valeur (exprimée de manière absolue par une longueur ou relative par un
pourcentage) spécifie la position horizontale par rapport au bord gauche. L’éventuelle deuxième valeur (démarquée de la première par un blanc) portera sur la position verticale (par rapport au bord supérieur). En son absence, c’est la valeur par
défaut center (ou 50%) qui prendra effet. Voici quelques règles :
• les nombres négatifs sont autorisés ;
• il est interdit de mêler valeurs relatives et absolues (dans le cas des positions) ;
• les valeurs relatives sont des pourcentages calculés par rapport aux dimensions de
l’image.
En somme, ces deux valeurs placent le coin supérieur gauche de l’image dans
l’espace. Pour mémoire les correspondances sont :
• 0% 0% = left top
• 50% 50% = center center
• 100% 100% = right bottom
div#global {background-image: url(dossier/fond.jpg);}
div#global {background-image: url(http://www.monsite.com/dossier/
fond.jpg);}
ASTUCE Contourner un bogue de Netscape Navigator
Les versions 4 et 6 de Netscape Navigator peuvent poser des problèmes d’affichage lors de l’imbrication
de tableaux, et répéter un arrière-plan dans les cellules des tableaux imbriqués.
On corrige ce bogue en spécifiant un arrière-plan sans image dans les éventuelles cellules concernées.
DEUXIÈME PARTIE
92
Par défaut, cette image sera répétée en damier (ou papier peint) à partir du coin
supérieur gauche. On peut toutefois modifier ce comportement en jouant sur les
autres attributs CSS de la propriété background.
À nouveau, l’absence d’un mécanisme d’héritage a peu d’impact : le comportement
par défaut étant l’absence de tout fond, les éléments imbriqués apparaîtront comme
ceux de leurs parents.
Deux valeurs sont possibles : none et url(chemin-vers-l’image). Voici des exemples :
Soulignons l’absence inhabituelle d’apostrophes simples ou doubles autour des noms
des images.
Positionner l’image à sa convenance
Avec background-position, on pourra placer dans un élément une image d’arrièreplan définie par background-image. Cet attribut s’utilise surtout en l’absence de
répétition (background-repeat).
La première valeur (exprimée de manière absolue par une longueur ou relative par un
pourcentage) spécifie la position horizontale par rapport au bord gauche. L’éventuelle deuxième valeur (démarquée de la première par un blanc) portera sur la position verticale (par rapport au bord supérieur). En son absence, c’est la valeur par
défaut center (ou 50%) qui prendra effet. Voici quelques règles :
• les nombres négatifs sont autorisés ;
• il est interdit de mêler valeurs relatives et absolues (dans le cas des positions) ;
• les valeurs relatives sont des pourcentages calculés par rapport aux dimensions de
l’image.
En somme, ces deux valeurs placent le coin supérieur gauche de l’image dans
l’espace. Pour mémoire les correspondances sont :
• 0% 0% = left top
• 50% 50% = center center
• 100% 100% = right bottom
div#global {background-image: url(dossier/fond.jpg);}
div#global {background-image: url(http://www.monsite.com/dossier/
fond.jpg);}
ASTUCE Contourner un bogue de Netscape Navigator
Les versions 4 et 6 de Netscape Navigator peuvent poser des problèmes d’affichage lors de l’imbrication
de tableaux, et répéter un arrière-plan dans les cellules des tableaux imbriqués.
On corrige ce bogue en spécifiant un arrière-plan sans image dans les éventuelles cellules concernées.