Multiples backgrounds en CSS3

Le CSS3 implémente une nouvelle fonctionnalité permettant d'ajouter plusieurs images en arriere plan d'un conteneur (par exemple un div). Cette fonctionnalité permet d'augmenter grandement votre créativité en web design.

Le principe est très simple, il suffit d'ajouter autant d'url d'image que nécessaire dans la propriété background

Voici un exemple

Démo

le code CSS

.multipleBackground{     position:relative;     width:200px;     height:120px;     background:url(../images/site/browsers/chrome.png) 0 0 no-repeat,                         url(../images/site/browsers/firefox.png) 30px 30px no-repeat,                         url(../images/site/browsers/safari.png) 60px 60px no-repeat,                         url(../images/site/template/projects.png) 0 0 no-repeat; }

Comme vous pouvez le constater, le principe est assez simple

Il est à noter que l'on peut inclure un gradient (ne fonctionne pas sous Opera, ni sous IE9 preview) :

Démo

le code CSS

.multipleBackgroundGradient{     position:relative;     width:200px;     height:120px;     /*Pour Navigateur Webkit*/     background:url(../images/site/browsers/chrome.png) 0 0 no-repeat,                         url(../images/site/browsers/firefox.png) 30px 30px no-repeat,                         url(../images/site/browsers/safari.png) 60px 60px no-repeat,                         url(../images/site/template/projects.png) 0 0 no-repeat,                         -webkit-gradient(linear, left top, left bottom, from(#68cbd0), to(#000000));     /*Pour Navigateur Mozilla*/     background:url(../images/site/browsers/chrome.png) 0 0 no-repeat,                         url(../images/site/browsers/firefox.png) 30px 30px no-repeat,                         url(../images/site/browsers/safari.png) 60px 60px no-repeat,                         url(../images/site/template/projects.png) 0 0 no-repeat,                         -moz-linear-gradient(top center, #68cbd0, #000000); }

le fichier css

le code HTML

<div class="multipleBackground"> </div> <div class="multipleBackgroundGradient"> </div>
retourner en haut de la page