Imagen de fondo que se expanda con el contenido de su capa
 

Hola a todos, tengo una imagen de fondo en un div, y quiero que cuando esa capa se expanda debido a que tenga mucho contenido, la imagen de fondo haga lo mismo.

¿Como puede hacerse?

Gracias y un saludo

debería expandirse por defaut ya que es el comportamiento normal... igualmente si "no funciona" podés agregar esto a tu css:

Hola:

No sé porqué, pero creo que la intención de la pregunta es que la imagen de fondo se estire... si es así yo diría que no es posible.

De todos modos, hace unos años puse en este foro un código javascript que provoca el efecto... Si te interesa, haz una búsqueda.

Saludos :arriba:

Con CSS puro hoy por hoy es imposible, aunque existen diversas formas de hacerlo a través de javascript (aunque creo que sólo con IE). De todas formas, está previsto que se implemente en el CSS 3, aunque para eso todavía queda xD

Aquí tienes la información oficial:
[http: // www . w3 . org / TR / css3-background / #the-background-size]

Perdona que lo ponga así, que no me deja poner enlaces por ser nuevo :(

Gracias por vuestras aportaciones.

Css3... ¿Cuando llegará?
Esperemos que despues de esto cada vez más a menudo dejemos de oir eso de: ...no se puede. :-)

Cambiare la capa de fondo por un par, así conseguire algo parecido.

nos vemos :adios:

Hola:

Sin usar javascript, pensé en un truco que he visto que en explorer funciona:

Poniendo al body los estilos:
position: relative;

Y como primer tag la imagen que se quiere de fondo con:
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;

También funciona en firefox, pero con un height en el body del 100% (no afecta a explorer).
Tampoco sé si vale con los scrolls.

Saludos :arriba:

apuntando por donde va caricatos, creo que CSS Play propone algo parecido (aunque no me senté a estudiar su código)..

Uf.. falta mucho.. algunas propiedades css3 (por ej. opacity) ya funcionan en Firefox y Opera, pero para que salga del estado de borrador falta mucho, y para que los acepte IE falta aún más (IE aún ni acepta varias de las propiedades CSS 2, así que..)

El truco empleado en CSS Play consiste en crear varias capas anidadas, cada una de mayor tamaño que la anterior, y con su correspondiente imagen... Es estandar y válido, pero no es más que un "juguete" irrealizable en la práctica por cuestiones obvias

me lo podés mostrar? no veo el código al que hacés referencia...solo veo 2 capas, scroller y content

si las pudieras explicar te agradecería.. el "juguete" de CSS Play está realizado en la prácitca.... aunque creo que te confundistes y CSSP no usa el método que pensás :pensando:

Ups, me he equivocado de ejemplo :censura: jejeje, eso me pasa por no comprobarlo primero. Yo me refería a este ejemplo en el que varía la dimensión de una imagen, utilizando para ello varias capas con la imagen en distinto tamaño. Ahora voy a investigar lo de la imagen de fondo, a ver cómo lo hace :si:

Ya está analizado :P Lo que hace es ponerle al body dimensiones de 100% y overflow:hidden para que ocupe toda la pantalla y no se expanda con scroll (lo cual es fundamental para lo que hace luego). A continuación, utliza un nuevo div, el el cual, NO utiliza una imagen de fondo, sino que la inserta como elemento img para que así pueda variar su tamaño.

Finalmente, para que de la impresión de que es una imagen de fondo (que no se pueda seleccionar, etc...) coloca un nuevo div que ocupe toda la pantalla y emule el scroll que ha perdido el body utlizando overflow:auto, y jugando con los z-index para que el div con la imagen de fondo, permanezca en el fondo e inseleccionable, y el resto de los elementos estén por encima.

Vamos, que el truco es original, sí, pero no sé yo si merece la pena...

Nigel, exactamente es como decís :si:

es que como dice la web, CSSPlay hace "Experiments with Cascading Style Sheets" :borracho: