rollover: porcentajes y pixeles

[rascabuchitos]

hola amigos
tengo esto en mi html para realizar un rollover

Código HTML:

<div id="caja1"><img src="imagen/tranvia.png" width="112px" height="16px" /></div>
 

y esto en css

Código CSS:

#caja1{
        width:112px;
        height:16px;
        float:left;
}
#caja1 img{ 
        width:112px;
        height:16px;
        float: left;
                background-image: url(../imagen/tranvia2.jpg);
}
#caja1 img:hover{ 
                background-image: url(../imagen/tranvia1.jpg);
}
 

todo funciona perfecto

pero antes de hacer el rollover a caja1 lo habia puesto en porcentajes para que se adecuee a toda pantalla, quise mantenerlo asi pero no se muestra la imagen si lo hago... mi consulta es: como debo trabajar todo esto que tengo en pixeles para pasarlo a porcentaje y se adapte a cualquier pantalla?


gracias

[pzin]

No sé si entendí bien, pero supongo que será que no la imagen de fondo no se adapta bien.

Puedes ajustar el fondo al elemento con algo así:

Código CSS:

background-size: cover
 

[rascabuchitos]

hola pzin
he intentado hacerlo con varios size...
pero solo me arroja parte de la imagen o sino una imagen pequeña

[pzin]

¿Probaste con contain en vez de cover? Es parecido, pero nunca te recorta la imagen, pero claro, te dejará hueco.

Código CSS:

background-size: contain
 

Esas serían las dos formas de hacerlo para que la imagen no se deforme. Si no te importa que pase eso y necesitas que siempre cubra todo el contenedor, puedes hacer:

Código CSS:

background-size: 100% 100%
 

[rascabuchitos]

si a eso me referia con haber usado varios size...
estuve revisando desde aqui
http://vagabundia.blogspot.com/2010/...ound-size.html

pero no me funciona
size es lo unico verdad o hay otras opciones?


gracias

[pzin]

Pero de todas formas esos #caja1 y #caja2 tienen medidas fijas, ¿no? Entonces no tiene más que hacer que la imagen de fondo mida lo mismo. No veo ninguna medida relativa ahí.