CSS3 apporte son lot de nouveautés qui changent la donne en offrant de nombreuses possibilités d’intégration. Parmi ces nouveautés, on trouve la possibilité d’afficher plusieurs images d’arrière-plan à un même élément.
Le résultat obtenu est similaire à ce que peut produire un logiciel graphique ayant recours au système de calques : la première image déclarée dans la liste sera au premier plan, la seconde au second plan, etc … Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan.
L’ordre de déclaration est important et doit impérativement correspondre aux images utilisées.
Démonstration par l’exemple : prenons un élément de type block comme un paragraphe. J’aimerais que ce paragraphe exprime une citation, et rien de tel que des guillemets pour signifier l’idée visuellement.
p {
background-image: url('img1.jpg'), url('img2.jpg');
background-position: left top, right bottom;
background-repeat: no-repeat;
}
En écriture raccourcie, cela donne :
p {
background: url('img1.jpg') left top no-repeat, url('img2.jpg') right bottom no-repeat;
}
Ce qui affiche le résultat suivant :
Au niveau de la compatibilité, les valeurs multiples de la propriété background sont reconnues par tous les navigateurs modernes sauf … surprise … Internet Explorer, qui ne les implémente qu’à partir de sa version 9. Pour palier à cela, il existe des possibilités de contournement en Javascript, notamment via jQuery, comme ici.
Cela a l’air de rien, mais c’est clairement un nouvel outil qui ouvre de belles perspectives en matière de webdesign, particulièrement dans le cadre de la réalisation d’animations.
