[SOLUCIONADO] Herencia background: color-image

[Hanzo_lx]

Hola estoy intentando hacer un conjunto de cajas la cual el color de fondo y una imagen que lleva de fondo depende de dos factores totalmente distintos, el codigo seria tal que asi:

Código:

<div class="box _WAPPR _MTO"><div class="text">Texto de prueba</div></div>

y la hoja de estilos esta:

Código:

.text {
    width: 540px;
    height: 25px;
    background-color: transparent;
    padding: 10px;
    color: #ffffff;
    font-family: Tahoma;
    font-size: 15px;
    position: absolute;
    z-index: 1;
    opacity: 1 !important;
    padding-left: 60px;
    padding-top: 15px;

.box{
    display: block;
    width: 650px;
    height: 50px;
    border-width:1px;
    border-style:solid;
    border-color: #ffffff;    
    margin: 0px 0px 10px 0px;
    opacity: 1 !important;
}
._WAPPR   {background: #1baa36}
._MTO   {background: url('images/wappr.png') no-repeat;}

el tema es que me gustaria separar la propiedad color de fondo (._WAPPR {background: #1baa36}) de la propiedad imagen de fondo (._MTO {background: url('images/wappr.png') no-repeat;}) para luego poder combinarlas de la forma que quisiera el problema es que al ir añadiendo las clases al class del div esta machaca la propiedad background con la ultima añadida, es decir que si pongo background rojo y luego le pongo de fondo la imagen, este elimina el color de fondo <div class="box _WAPPR _MTO">

he estado leyendo sobre la herencia pero no se que hago mal, a ver si alguien puede echarme una man

[pzin]

Usa:

Código CSS:

background-image
background-color
 

http://www.w3.org/TR/CSS2/colors.htm...und-properties

[Hanzo_lx]

Muchas gracias, la verdad creo que intente complicarme demasiado, me ha funcionado ;)