Foros del Web » Creando para Internet » CSS »

Ajustar imagen de fondo

Estas en el tema de Ajustar imagen de fondo en el foro de CSS en Foros del Web. Quería poner a etiqueta <div>...</div> una imagen de fondo. La etiqueta tiene una anchura y altura fijas. Pero la imagen puede ser menor en cuánto ...
  #1 (permalink)  
Antiguo 11/04/2006, 06:42
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 11 años, 8 meses
Puntos: 3
Ajustar imagen de fondo

Quería poner a etiqueta <div>...</div> una imagen de fondo. La etiqueta tiene una anchura y altura fijas. Pero la imagen puede ser menor en cuánto a las medidas mencionadas.

Así que yo pongo:

Código:
<div style="background-image:url(imags/promosViv/laImagen);background-repeat:no-repeat;width:390px;height:166px;"> ... </div>
Entonces, en los casos que laImagen es menor del tamaño de la <div> se muestra repetida. Para evitar esto, añado al estilo lo siguiente:

Código:
<div style="background-image:url(imags/promosViv/laImagen);background-repeat:no-repeat;width:390px;height:166px;"> ... </div>
Pero entonces, cuando la imagen es más pequeña del área definida, pues eso que no ocupa todo el espacio.

Luego, ahí va la pregunta:
¿Hay alguna propiedad ó algún estilo para ajustar la imagen de fondo al tamaño definido de la <div>?

Saludos,

zacktagnan.
============================================

<img src="imags/promosViv/marco_Promo.png" width="390" height="166" /></div>
  #2 (permalink)  
Antiguo 11/04/2006, 12:04
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 11 años, 8 meses
Puntos: 3
¿Ninguna respuesta, sugerencia ó solución? ¿ó es imposible hacer lo que planteo?

Saludos,

zacktagnan.
================================================== =
  #3 (permalink)  
Antiguo 11/04/2006, 12:23
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 11 años, 1 mes
Puntos: 1
Hola zacktagnan.

Cita:
¿ó es imposible hacer lo que planteo?
Tal y como lo planteas, sí.

Que al fondo de un elemento se le pueda asignar una imagen no quiere decir que el fondo de un elemento pueda ser tratado como una imagen.

Una imagen (foto.png) es una cosa.
un elemento (<img src='...'>) es otra distinta.
El fondo de un elemento no es ninguna de las anteriores.

http://www.sidar.org/recur/desdi/tra...ss/colors.html
  #4 (permalink)  
Antiguo 11/04/2006, 12:55
axz
 
Fecha de Ingreso: mayo-2005
Mensajes: 360
Antigüedad: 11 años, 6 meses
Puntos: 10
la propiedad como tal no la hay, al menos de momento, pero puedes usar 2 divs para simular lo que dices ... algo como esto:

Código HTML:
<div style="width: 100px; height: 100px;">
<div style="width: 200px; height: 200px;">
<img src="img\_foto_detalle.jpg" style="width: 100px; height: 100px;"/>
</div>
</div> 
checa que el alto y ancho en los 3 elementos es el mismo, es como simular un background ... obviamente puedes meter todo el "width: 200px; height: 200px;" a una clase CSS

ojalá te sirva ...
saludos
  #5 (permalink)  
Antiguo 11/04/2006, 13:08
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 11 años, 1 mes
Puntos: 1
background-position
http://www.w3.org/TR/CSS21/colors.ht...round-position
  #6 (permalink)  
Antiguo 19/04/2006, 04:29
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 11 años, 8 meses
Puntos: 3
Yo lo que quisiera conseguir es lo siguiente:

Partiendo de dos imágenes, realizar algo así como una imagen encuadrada. Las imágenes serían una marco transparente y otra foto ó imagen que se usaría de fondo, que puede ser de tamaño menor que el del marco, en cuyo caso se debería ajustar al marco.

Estas son las imágenes iniciales:

Marco:


Imagen Fondo:



El resultado final deseado sería:


Hasta ahora, sólo he conseguido que la imagen de fondo salga repetida hasta llenar todo el espacio.
Si pongo "background-repeat: no-repeat;", no se repite pero no llena todo el espacio.
Con el "background-position: 100% 100%;" tampoco he conseguido nada a no ser que no lo haya aplicado bien.

Pues eso, si hay alguna sugerencia...

Saludos,

zacktagnan.
================================================== =======
  #7 (permalink)  
Antiguo 19/04/2006, 14:58
axz
 
Fecha de Ingreso: mayo-2005
Mensajes: 360
Antigüedad: 11 años, 6 meses
Puntos: 10
mmm ... pues como te comento ... con CSS puro no existe la propiedad que te aumente el tamaño de la imagen de fondo ... pero puedes intentar meter un div dentro de otro div ... y así lograrlo ... la ventaja que tienes es que una imagen si la puedes dimensionar al tamaño que quiereas ... aunque sea fuera de sus límites ... x ejemplo si tienes una imagen de 100X100 px, puedes hacer:
Código HTML:
<img src="mi_imagen.gif" style="width: 120px; height: 300px;" /> 
... o cualquier otra deformación que se te ocurra, no es por ser mente cerrada, pero checa el mensaje anterior que envié, eso te debe servir a la perfección ...
  #8 (permalink)  
Antiguo 21/04/2006, 11:44
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 11 años, 8 meses
Puntos: 3
No llego a comprender del todo...

<div style="width: 100px; height: 100px;"> ( 1 )
<div style="width: 200px; height: 200px;"> ( 2 )
<img src="img\_foto_detalle.jpg" style="width: 100px; height: 100px;"/>
</div>
</div>

¿En qué <div> va la imagen de fondo (la del edificio) en la ( 1 ) ó en la ( 2 ) ? ¿Y el marco en cuál? Cada una de ellas van como background ó quieres decir que la de marco va de fondo y la del edificio como imagen.

Es que no me llego a aclarar...

Saludos,

zacktagnan.
================================================== ===
  #9 (permalink)  
Antiguo 21/04/2006, 16:37
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 11 años, 9 meses
Puntos: 9
<div style="position:relative;top:20%;left:20%;">
<img style="position:absolute;z-index:1;" src="00marco_Promo.gif">
<img style="position:absolute;top:0;left:0;zindex:0;" src="00alsume_portada.jpg" width="390" height="166">
</div>

  #10 (permalink)  
Antiguo 02/07/2011, 14:08
 
Fecha de Ingreso: marzo-2011
Mensajes: 7
Antigüedad: 5 años, 8 meses
Puntos: 2
Respuesta: Ajustar imagen de fondo

Tube el mismo problema y aunque el tema es algo viejo quizas alguien necesite la respuesta, para hacer que la imagen de background de un div se redimencine segun su tamaño pones lo siguiente en el css:

background-size: 100% 100%;

esto quiere decir que el background tendra un width: 100% y un height:100%; lo cual hara que la imagen se adapte al tamaño del div.

espero ayude.
  #11 (permalink)  
Antiguo 03/05/2012, 15:25
 
Fecha de Ingreso: mayo-2012
Mensajes: 1
Antigüedad: 4 años, 7 meses
Puntos: 0
Pregunta Respuesta: Ajustar imagen de fondo

Mismo problem
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 05:47.