Multiple background in multiple class

[Reiuky]

Spero di riuscire a formulare bene la domanda.

Ho questa esigenza: in un unico div ho 3 classi (esempio...

<div class="rosso blu verde">Novembre</div>

ciascuna delle tre classi deve inserire una immagine url diversa, con sfondo trasparente e sovrapponibile

(sono tre spicchi di cerchio, quello in alto rosso, quello in basso a sinistra verde e quello in basso a destra blu).

se scrivessi qualcosa del tipo

.rosso{background-image:url(rosso.png);}
.verde{background-image:url(verde.png);}
.blu{background-image:url(blu.png);}

(ovviamente con i relativi no repeat del caso)
ogni nuova dichiarazione mi va a sovrascrivere quella precedente. c'è un modo per dirgli di aggiungere e non di sovrascrivere?

Oppure sono costretto a spacchettare il div in tre div separati ciascuno con la propria classe?

[Prill]

Puoi usare sfondi multipli su uno stesso elemento, puoi guardare qui per un esempio http://www.css3.info/preview/multiple-backgrounds/

oppure sfruttare gli pseudo elementi before e after. Per esempio una cosa simile:

.miodiv {
    position: relative;
    width: ...;
    height: ...;
    background: ...;
}


.miodiv:before {
    content: ' ';
    display:block:
    position: absolute;
    left: ...;
    top: ...;
    width: ...;
    height: ...;
    background: ...;
}

.miodiv:after {
    content: ' ';
    display:block;
    position: absolute;
    top: ...;
    left: ...;
    width: ...;
    height: ...;
    background: ...;
}

nell'html avrai
<div class="miodiv> contenuti del div</div>

Da inserire i valori desiderati al posto dei ...