Multiples background en CSS3

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.

4 commentaires Donner une note à l'article (5)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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

 
Sélectionnez

.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

 
Sélectionnez

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

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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.