Plusieurs class sur un div avec background ?

Bonjour,

Je souhaiterai savoir s'il est possible d'associer plusieurs background (avec fond transparent) à une seule div grâce à plusieurs class ?

Je pensais faire quelque chose comme ceci :

<div id="fond" class="fond1 fond2"></div>

#fond {
    width: 100px;
    height: 100px;
}

.fond1 {
    background: url('images/fond1.png');
}
.fond2 {
    background: url('images/fond2.png');

Bien évidemment chaque image représente une forme avec un fond transparent, ainsi en les superposant on pourrait voir les 2 formes (car elles ne sont pas placés au même endroit).

Cependant avec ce code, je n'ai que le second fond qui s'affiche et pas le premier, comme si on ne pouvait pas attribuer 2 background à une div en passant par 2 class...

Dans cet exemple il y a 2 fonds, mais il peut y en avoir N...

Sauriez-vous s'il existe un moyen pour arriver à faire ce que je souhaiterai sans avoir à créer N div (et les superposer avec absolute)? Donc pour tout afficher dans la même div.

Je vous remercie d'avance !

Salut,

En CSS 3, tu peux déclarer plusieurs arrière-plans à la suite, séparés par une virgule (un tutoriel pour illustrer le propos). Et c'est pris en charge par Firefox 3.6+, Opera 10.5+, Safari, Google Chrome et IE 9.

Malheureusement cette solution ne me convient pas, car je vais devoir faire de l'ajout/suppression dynamique de class sur une même div avec du JavaScript.

Du coup, je vais utiliser les méthodes .append() et .remove() de jQuery pour ajouter directement une balise image (pour chaque class).

En tout cas merci pour ta réactivité !

Pas besoin de classes multiples pour des arrière-plans multiples en CSS 3.

Victor BRITO a écrit :
Pas besoin de classes multiples pour des arrière-plans multiples en CSS 3.

Oui mais en l'absence d'API CSS Object Model (CSSOM, en cours de spécification), la seule manière de modifier les background multiples d'un élément en JavaScript c'est de réécrire une chaine de caractères complète. Par exemple:

monElement.style.background = 'url(image1.png), url('image5.png'), url(image8.png)';

... avec la chaine de caractères sans doute construite de manière dynamique en piochant dans un tableau ou un objet, et en utilisant la méthode join(). Bon, ça reste possible et pas trop méchant à programmer.