Foros del Web » Creando para Internet » CSS »

Cambiar el tamaño de un background-image

Estas en el tema de Cambiar el tamaño de un background-image en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/12/2006, 16:10
 
Fecha de Ingreso: mayo-2006
Mensajes: 32
Antigüedad: 11 años, 7 meses
Puntos: 0
Cambiar el tamaño de un background-image

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
  #2 (permalink)  
Antiguo 25/12/2006, 16:28
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Cambiar el tamaño de un background-image

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 26/12/2006, 03:29
 
Fecha de Ingreso: mayo-2006
Mensajes: 32
Antigüedad: 11 años, 7 meses
Puntos: 0
Re: Cambiar el tamaño de un background-image

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...
  #4 (permalink)  
Antiguo 26/12/2006, 09:06
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Cambiar el tamaño de un background-image

Hola:

En tu pregunta hablabas de emular...

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

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 26/12/2006, 10:53
 
Fecha de Ingreso: mayo-2006
Mensajes: 32
Antigüedad: 11 años, 7 meses
Puntos: 0
Re: Cambiar el tamaño de un background-image

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
  #6 (permalink)  
Antiguo 26/12/2006, 11:18
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
Re: Cambiar el tamaño de un background-image

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
__________________
Saludos
FT.
www.fernando.com.mx
  #7 (permalink)  
Antiguo 27/12/2006, 03:58
 
Fecha de Ingreso: mayo-2006
Mensajes: 32
Antigüedad: 11 años, 7 meses
Puntos: 0
Re: Cambiar el tamaño de un background-image

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
  #8 (permalink)  
Antiguo 27/12/2006, 06:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Cambiar el tamaño de un background-image

¿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.
  #9 (permalink)  
Antiguo 27/12/2006, 11:24
 
Fecha de Ingreso: mayo-2006
Mensajes: 32
Antigüedad: 11 años, 7 meses
Puntos: 0
Re: Cambiar el tamaño de un background-image

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
  #10 (permalink)  
Antiguo 24/11/2010, 23:40
Avatar de mamon  
Fecha de Ingreso: enero-2002
Ubicación: Lima
Mensajes: 1.302
Antigüedad: 15 años, 11 meses
Puntos: 3
Respuesta: Cambiar el tamaño de un background-image

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?
__________________
Yo si sé lo que es trabajar duro, porque lo he visto.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:29.