Problema con background-imagen

[matak]

Buenas amigos del foro.

Tengo un problema con CSS que no logro ni explicar ni solucionar.

Tengo esta estructura de Divs para maquetar una página, esta se encuentra en ./configuracion/parametros.php y es incluida (mediante un include de php) desde index.php que se encuentra en el raiz./

Código html:

<div id="contenido_param">
 
  <div class="barra_secciones" align="center" style="float:left;width: 100%;height: 20px;background-image: url('media/barrapk.png');background-repeat: repeat-x;">
 
  </div>
  <div id="menu_param">
    <table>
      <tr>
        <td valign="middle">
          <ul id="nav_param">
            <li id="nav_param-horarios"><a href="javascript: mueveparam('configuracion/muevePestanaParam.php?va=jorn&viene=jorn','jorn');" class="active"><?PHP echo "Horarios"; ?></a></li>
            <li id="nav_param-intervalos"><a href="javascript: mueveparam('configuracion/muevePestanaParam.php?va=inter&viene=jorn','jorn');"><?PHP echo "Intervalos"; ?></a></li>
          </ul>
        </td>
      </tr>
    </table>
  </div>
 
  <div class="tabla_param" style="float:left; width:100%;">
 
    <FORM ACTION="parametros/daralta.php" NAME="insertarParam" METHOD="POST" ENCTYPE="multipart/form-data">
      <TABLE width="100%" id="formPestanas">
        <tbody>
 
        </tbody>
      </TABLE>
    </FORM>
 
  </div> <!--cierre tabla_param-->
 
  <div class="espacio_boton_act">
    <img src="media/barracleaner.png">
  </div>
 
  <div class="boton_param"  onclick="javascript:actualizaAgenda('today/volverAct.php?dia=<?PHP echo $fecha_actual[2]; ?>&nuevo_mes=<?PHP echo $fecha_actual[1]; ?>&nuevo_ano=<?PHP echo $fecha_actual[0]; ?>');">
    <div class="contenido_boton_param">
            <table>
            <tr><td>&nbsp;</td><td>
                <img src="media/exitdoor.gif">
            </td>
            <td valing="middle">
                &nbsp;exit
            </td></tr>
            </table>
    </div>
  </div>
 
  <div class="espacio_boton_param">
    <img src="media/barracleaner.png">
  </div>
 
  <div class="boton_param"  onClick="javascript: muevepestana('today/muevePestanaParam.php?va=datosCO&viene=datosCO','datosCO'); javascript: document.forms.insertarContacto.submit();">
    <div class="contenido_boton_param">
            <table>
            <tr><td>&nbsp;</td><td>
                <img src="media/guardar.png">
            </td>
            <td valing="middle">
                &nbsp;Guardar
            </td></tr>
            </table>
    </div>
  </div>
</div> <!-- cierre contenido_param -->
 

y este es el CSS que da estilo, que se encuentra en ./configuracion/parametros.css

Código css:

#contenido_param {
    width: 100%;
    background-image: url("../media/barradegradada.png");
    background-repeat: repeat-x;
}
.tabla_param {
  height: 490px;
    overflow-x: auto;
    overflow-y: visible;
}
 
.boton_param {
  float: right;
    display: inline;
  width: 10%;
  cursor:pointer;
}
 
.contenido_boton_param {
  height: 30px;
    border: 1px solid #4682B4;
    /*font:bold 10px Verdana;*/
    background-image: url("../media/barra.png");
    background-repeat: repeat-x;
    /*vertical-align: middle;*/
}
 
.contenido_boton_param:hover {
    background-image: url("../media/barraon.png");
    background-repeat: repeat-x;
    border: 1px solid #064274;
}
 
.espacio_boton_param {
  float: right;
    display: inline;
  width: 2%;
  height:30px;
}
/*-------------------PESTAÑAS PARAMETROS------------------------*/
 
#menu_param {
text-align: left;
   width: 100%;
   height: 27px;
   float:left;
  vertical-align:middle;
   
}
 
 
ul#nav_param {
    position: relative;
    height: 27px; width: 490px;
    background: url("../media/menu2.png") no-repeat;
 margin: 0 0 0 0; padding: 0 0 0 0;
      padding-top: 5px;
  vertical-align:middle;
    }
 
    ul#nav_param li {
        float: left;
         margin: 0 0 0 0; padding: 0 0 0 0;
        list-style: none;
        }
    
    ul#nav_param li a {
        position: absolute;
        /*text-indent: -9999px;*/
        text-align:center;
        vertical-align:middle;
        text-decoration: none;
        border: none ;
        top: 0; height: 20px;
    font-family:Verdana;
    font-weight: bold;
    font-size: 8pt;
    color: #064274;
    cursor:pointer;
        }
 
        ul#nav_param li#nav_param-horarios a { 
            left: 6px; width: 62px; 
            background: url("../media/menu2.png") -6px 0 no-repeat;
      vertical-align:middle;
 
            }
        ul#nav_param li#nav_param-intervalos a { 
            left: 70px; width: 80px; 
            background: url("../media/menu2.png") -70px 0 no-repeat;
            vertical-align:middle;
            }
            
            
ul#nav_param li#nav_param-horarios a:hover              { background-position: -6px   -33px; }
ul#nav_param li#nav_param-intervalos a:hover            { background-position: -70px  -33px; }
 
ul#nav_param li#nav_param-horarios a.active             { background-position: -6px   -66px; }
ul#nav_param li#nav_param-intervalos a.active           { background-position: -70px  -66px; }
 

Las imagenes se encuentran en ./media.
Todo el estilo me funciona correctamente salvo el backgroun-image de #contenido_param ni me lo pinta ni me hace el background-repeat. No me lo puedo explicar cuando el resto de imagenes de fondo de los otros divs si me los pinta y repite correctamente.

Si alguien me pudiera decir algo???Muchas Gracias de antemano

Saludos

[Eourus]

No me he leído el código, pero si no te lo dibuja lo más seguro es que sea por la ruta.

¿Porque no usas rutas absolutas en vez de relativas?.

[matak]

puede que tengas razon, pero entonces como explicas que pinte las demás imagenes y la del div #contenido_param no siendo que están en la misma ubicación y las rutas relativas que pongo son las mismas

Gracias de todas formas por tu contestación aunque si podeis mirar elcódigo os daréis cuenta que algo raro pasa.

P.d. ¿¿¿La ruta absoluta sería p.e. src="http://localhost/miProyecto/imagenes/miimagen.png" ???

[kseso?]

prueba

#contenido_param {
width: 100%;
background: #trasparent url(../media/barradegradada.png) repeat-x left top;

Si te has asegurado que realmente está la imagen en ese directorio:
¿Has verificado que la imagen barradegradada.png sea un png de 24 bits y no de 32 bits?
O cualquier otra extensión no compatible con los navegadores renombrada a png.

[matak]

Por eso no hay problema...

Empleo esa misma imagen en otras clases para otras páginas de la misma aplicación y me funciona perfectamente. Además con el firebug del firefox buceo por el codigo html y voy hasta el div #contenido_param,...me posiciono encima de él y en la parte del css me aparece correctamente el codigo css asociado a ese identificador, cuando paso el ratón por encima del url del background-image me sale un tooltip con la imagen informandome de la resolución, es decir, la imagen la encuentra, no se porque no la pinta,...

Tiene que ser algo de conflicto entre los divs o algo asi,...

No se que más puedo mirar

Gracias por vuestro interés

[matak]

Solucionado,...asi quedo el CSS

#contenido_param {
width:100%;
background-image:url(../media/barradegradada.png);
background-repeat:repeat-x;
display:inline;
float:left;
}

Gracias