Les feuilles de styles CSS
DEUXIÈME PARTIE
94
Fixer l’image par rapport au contenu
Une image d’arrière-plan accompagne par défaut son élément si celui-ci est déplacé
dans une barre d’ascenseur (scroll). On peut toutefois la fixer par rapport à la fenêtre
du navigateur avec la propriété background-attachment.
Pour mieux comprendre le principe, il suffit d’appliquer une image de fond au document entier :
Placez à présent dans ce document un très long texte pour servir d’exemple (un site
web en propose à cet effet : http://www.lipsum.com). Le texte d’exemple ne tenant pas
sur la fenêtre, une barre d’ascenseur apparaît sur la droite. Déplacer cet ascenseur
provoque le comportement par défaut de l’image de fond : elle accompagne le mouvement jusqu’à sortir complètement du champ.
Ajoutons à présent la déclaration suivante à l’élément body :
L’image n’est plus attachée au contenu, mais à la fenêtre. Elle reste en place, quelle
que soit la position de l’ascenseur. C’est donc une propriété très intéressante pour
placer certains éléments de mise en page devant rester figés quel que soit le contenu
du document (par exemple, des logos).
Notation raccourcie
Une notation abrégée permet ici encore d’alléger les suites de déclarations semblables. La propriété background réunit toutes les caractéristiques d’arrière-plan décrites
dans ce chapitre.
Ce qui en notation classique s’écrit :
body {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: center right;
}
background-attachment: fixed;
body {
background-color: white;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: center right;
background-attachment: scroll;
}