Comme vous le savez, je m’intéresse beaucoup à HTML5 et à CSS. Jusqu’à maintenant, j’avais quelque peu délaissé la future version de CSS pour me consacrer à HTML5 (et mes 10 000 projets personnels, mais bon…).
Aujourd’hui, je vous offre une nouveauté de CSS3 que j’attends depuis un bon moment et qui risque de me faire sauver de l’argent sur les tylenols. Depuis que je fais du design web, il m’est arrivé de me casser la tête en CSS pour faire certains trucs. Non pas que je ne connais pas CSS, mais plutôt parce que la version actuelle a été négligé.
En effet, il n’est pas possible avec la version 2 de CSS d’appliquer plusieurs images en background à un même élément. Pourquoi? Aucune idée. Il est pourtant évident que tous aurait bénéficié de pouvoir le faire. Heureusement que CSS3 va être terminé un jour…
Voici donc comment appliquer plusieurs backgrounds à un même élément en CSS3 :
#twitterWidget {
/* L'ORDRE POUR PLACER LES BACKGROUNDS EST IMPORTANTE */
background-image: url(../images/box-bg-top.jpg),
url(../images/box-bg-middle.jpg),
 url(../images/box-bg-bottom.jpg);
background-position: top left, center center, bottom left;
background-repeat: no-repeat, repeat, no-repeat;
}
Dans notre exemple, nous avons 3 images différentes. Une pour le haut, une autre pour le milieu et finalement une pour le bas. Il suffit de séparer nos déclarations par des virgules pour appliquer plus d’un background à un élément. Aussi simple que cela.
Remarque : L’ordre dans lequel nous plaçons nos backgrounds est important. Il est préférable de suivre cet ordre logique : top, middle, bottom.
À noter que les backgrounds multiples ne sont pas pris en compte par Firefox 3.5. Je vous conseille donc de faire les tests sous Chrome 3.0 et Safari 4.
Télécharger l’exemple des backgrounds multiples en CSS3.
Voici le lien pour voir l’exemple en ligne : http://ins.pire.me/open-source/css3/exemple01-background/demo.html
L’icône Twitter utilisée à été créé par la designer Mirjami Manninen.
