Multiple images avec CSS et background-image

Attention ! Cet article a plus de 1 an (3510 jours), ce qui signifie qu'il n'est pas forcément à jour !

Depuis peu, nous avons une nouvelle syntaxe qui nous permet d’avoir multiple image en background-image. Son support est assez bon : Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) et même Internet Explorer (9.0+).

Plus bas, je vous met en lien un artcile de David Walsh, duquel j’ai tiré l’exemple de code que je vous place ici. Je vous mets aussi un autre artcile plus complet avec plusieurs exemples (en anglais).

#multipleBGs { 
     background: url(photo1.png),
          url(photo2.png),
          url(photo3.png) ;
     background-repeat: no-repeat,  no-repeat,    repeat-y;
     background-position: 0 0,  30px 70px,  right top;
     width: 400px;
     height: 400px; 
     border: 1px solid #ccc;
}

Articles: davidwalsh.name/css-multiple-background, www.css3.info/preview/multiple-backgrounds/

Catégories :

HTML CSS