Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Imagen de fondo que se expanda con el contenido de su capa en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 03/08/2006, 05:55
yz!
 
Fecha de Ingreso: junio-2004
Ubicación: Zaragoza
Mensajes: 168
Antigüedad: 13 años, 5 meses
Puntos: 0
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
  #2 (permalink)  
Antiguo 03/08/2006, 07:02
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
debería expandirse por defaut ya que es el comportamiento normal... igualmente si "no funciona" podés agregar esto a tu css:
Código:
background-repeat:repeat !important;
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 03/08/2006, 09:37
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
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 04/08/2006, 14:37
 
Fecha de Ingreso: agosto-2006
Ubicación: Madrid
Mensajes: 95
Antigüedad: 11 años, 4 meses
Puntos: 0
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 :(
  #5 (permalink)  
Antiguo 05/08/2006, 01:34
yz!
 
Fecha de Ingreso: junio-2004
Ubicación: Zaragoza
Mensajes: 168
Antigüedad: 13 años, 5 meses
Puntos: 0
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
  #6 (permalink)  
Antiguo 05/08/2006, 06:09
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
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 05/08/2006, 14:53
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
apuntando por donde va caricatos, creo que CSS Play propone algo parecido (aunque no me senté a estudiar su código)..

Cita:
Iniciado por yz!
Css3... ¿Cuando llegará?
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..)
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #8 (permalink)  
Antiguo 05/08/2006, 17:54
 
Fecha de Ingreso: agosto-2006
Ubicación: Madrid
Mensajes: 95
Antigüedad: 11 años, 4 meses
Puntos: 0
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
  #9 (permalink)  
Antiguo 05/08/2006, 18:03
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Cita:
Iniciado por Nigel Ver Mensaje
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...
me lo podés mostrar? no veo el código al que hacés referencia...solo veo 2 capas, scroller y content

Cita:
irrealizable en la práctica por cuestiones obvias
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
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #10 (permalink)  
Antiguo 05/08/2006, 19:52
 
Fecha de Ingreso: agosto-2006
Ubicación: Madrid
Mensajes: 95
Antigüedad: 11 años, 4 meses
Puntos: 0
Ups, me he equivocado de ejemplo 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
  #11 (permalink)  
Antiguo 05/08/2006, 20:01
 
Fecha de Ingreso: agosto-2006
Ubicación: Madrid
Mensajes: 95
Antigüedad: 11 años, 4 meses
Puntos: 0
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...
  #12 (permalink)  
Antiguo 06/08/2006, 19:52
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Nigel, exactamente es como decís

Cita:
Iniciado por Nigel Ver Mensaje
Vamos, que el truco es original, sí, pero no sé yo si merece la pena...
es que como dice la web, CSSPlay hace "Experiments with Cascading Style Sheets"
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
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 12:19.