Cambiar el tamaño de un background-image

[Javier F.]

Hola, intento emular la opción de CSS3, background-size, para cambiar el tamaño de un background-image, pero no doy con ello ¿Alguien sabe como hacerlo? Quizás con Javascript...
Gracias y un saludo,
Javier

[caricatos]

Hola:

Que yo sepa, no es necesario javascript... poniendo un tag imagen como primer tag de una capa y los estilos:

position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;

Creo que no sería necesario el top y left, pero tampoco está de más.

Saludos

[Javier F.]

Gracias caricatos, pero no acabo de enterderte bien. Creo que estás indicando como agrandar una imagen en una capa simplemente con <img width=100%..., y yo lo que intento es hacerlo con una imagen de fondo, es decir, que al cargar la página, o una parte con ajax, el tamaño de la imagen de fondo de una capa cambie según yo le indique.
No sé si me explico...

[caricatos]

Hola:

En tu pregunta hablabas de emular...

Con estilos ahora no es posible (que yo sepa)... y te propuse una "emulación"

Saludos

[Javier F.]

Disculpa, posiblemente me expliqué mal. La imagen a agrandar debe estar como fondo y el contenido colocarse encima. Como un background-image, pero de tamaño variable. Lo quiero para hacer botones que se agranden o disminuyan en un diseño elástico.
Gracias,
Javier

[fer10]

agrandar los botones solo probocaria que se pixeleara las imagenes no es muy recomendable, a demas que la unica manera que yo consca de hacerlo es colocando el width, height directamente al objeto (no de background) como por ejemplo en imagenes..

es una descabellada idea :P

[Javier F.]

Gracias fer10 por la respuesta, la idea era que el ancho y alto ya fueran lo suficientemente grandes como para que sólo tuviera que modificarse al reducirse. De todas formas anoche encontré este enlace:
http://www.csszengarden.com/?cssfile=063%2F063%2Ecss
Fíjate que el encabezado no pierde ni una pizca de calidad al agrandarse... Lo malo es que no doy como narices lo ha hecho. Quizás así:
http://archivist.incutio.com/viewlist/css-discuss/28007

Un saludo,
Javier

[Mikmoro]

¿Qué es lo que no pierde calidad al agrandarse en el enlace que has puesto? Porque yo no veo agrandarse nada. El encabezado sigue siempre igual, y su fondo también. Dime si puedes a qué te refieres, e intentamos mirar cómo está hecho.

Mikel.

[Javier F.]

Anda, pués es verdad, me pareció que el encabezado cambiaba de tamaño... y era de posición. Jo, que mal estoy.
Me parece que, o se hace como con el segundo enlace que puse, o hay que esperar a que los navegadores acepten background-size.

Javier

[mamon]

Y si haces que la imagen flote dentro de una capa?

Por ejemplo

CSS:

html, body{
height: 100%;
}
div.capa{
width: 100%;
height: 100%;
}
div.capa img{
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
}
div.capa div.contenido{
position: absolute;
z-index: 2;
}


HTML
<div class="capa">
<img src="imagen.jpg" width="100%" height="100%" alt="" />
<div class="contenido">Tu texto</div>
</div>


No lo he probado, pero prodría funcionar... Aunque creo que el 100% en un IMG no funciona, creo que alguna vez lo probé y no funciono...

Nos cuentas como te fue?