Multiples background en CSS3

debray jerome

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

Compatibilité : Chrome, Safari, Firefox, Internet Explorer 9, Opera.

Commentez

- Titre : Multiples background en CSS3

- Auteur : debray jerome

- Parution : 15 décembre 2010

- Licence : Copyright ® 2010 debray jerome. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Principe de fonctionnement

- II. Avec un dégradé

- III. Remerciements

I - Principe de fonctionnement

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

Voici un exemple : demo

.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;
}

Vous remarquerez que l'image en premier plan est déclarée en premier dans la propriété background.

II - Avec un dégradé

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

demo

.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,
-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,
-moz-linear-gradient(top center, #68cbd0, #000000);
}

le gradient étant en arrière-plan, il est déclaré en dernier.

III - Remerciements

Merci à ClaudeLELOUP et à jacques_jean pour leurs relectures.