Usare CSS per rendere background-image sopra background-color in un elenco

Question

Questo è il codice

<ul> 
    <li class="test"> 
     <a href="#"> 
      <h2>Blah</h2> 
      <p>Blah Blah Blah</p> 
     </a> 
    </li> 
</ul> 

In sostanza, la mia lista ha già una certa styling, per esempio, ho impostato il colore di sfondo per esso.

Ora nella classe "test", ho anche impostato un'immagine di sfondo.

La mia domanda è che voglio fare in modo che l'immagine di sfondo rimanga sopra il colore di sfondo e non so come ottenerlo. Ho provato con z-index ma penso che non sia applicabile all'immagine di sfondo.

Si prega di dare un'occhiata alle immagini

Edit: Questo è il codice CSS

Ad esempio, questo è lo stile per la mia lista

#sidebar ul li{ 
    background:#ccf; 
} 

E questo è lo stile per il test di classe

.test{ 
    background-image: url('img/big_tick.png'); 
    background-repeat:no-repeat; 
    background-position: bottom right; 
    -moz-background-size: 30%; 
    -webkit-background-size: 30%; 
    background-size: 30%;  
    margin-right: 30px; 
} 

Answer 1

Aggiungere l'attributo !important al numero background-image. Come questo:

.test a{ 
background-image: url('img/big_tick.png') !important; 
background-repeat:no-repeat; 
background-position: bottom right; 
-moz-background-size: 30%; 
-webkit-background-size: 30%; 
background-size: 30%;  
margin-right: 30px; 

}

Ho un esempio violino here

EDIT: ho cambiato la classe per .test a per riflettere lo schema di styling attuale

Answer 2

Prova: aggiungendo la specificità alla classe .test: #sidebar ul li.test

O, meglio ancora, se è possibile, aggiungere background-color alla classe .test, e sbarazzarsi del selettore elemento del tutto.

Eviterei di usare! Importante se non ne avete assolutamente bisogno. A lungo termine, usarlo renderà il tuo editing un css un dolore. Invece di usare! Important, suggerisco di conoscere la specificità: http://reference.sitepoint.com/css/inheritancecascade