Ajustar imagen de fondo

[zacktagnan]

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>

[zacktagnan]

¿Ninguna respuesta, sugerencia ó solución? ¿ó es imposible hacer lo que planteo?

Saludos,

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

[Jorolo]

Hola zacktagnan.

¿ó 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

[axz]

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

[Jorolo]

background-position
http://www.w3.org/TR/CSS21/colors.ht...round-position

[zacktagnan]

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.
================================================== =======

[axz]

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 ...

[zacktagnan]

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.
================================================== ===

[programeitor]

<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>

[DarkBB]

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.

[javo88]

Mismo problem