Foros del Web » Creando para Internet » CSS »

Background 100%

Estas en el tema de Background 100% en el foro de CSS en Foros del Web. Bueno, la cuestión es simple, tengo hecha una imagen como background, lo que quiero es que esta imagen se adapte al tamaño del div en ...
  #1 (permalink)  
Antiguo 07/09/2009, 12:04
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 10 años
Puntos: 5
Pregunta Background 100%

Bueno, la cuestión es simple, tengo hecha una imagen como background, lo que quiero es que esta imagen se adapte al tamaño del div en el que se encuentra, de tal forma, que el tamaño de la imagen y sus bordes coincidan con el tamaño y los bordes del div. Pero no se como hacerlo. Llevo ya varias intentonas jugando con diferentes divs y etiquetas <img>, pero quiero que sea con css puro.

¿Alguien podría explicarme, si se puede, como hacerlo?. Gracias.
__________________
Aprender J2EE en www.programacionj2ee.com.
Mi framework PHP D Framework.
  #2 (permalink)  
Antiguo 07/09/2009, 12:14
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Background 100%

puedes ver este post
http://www.forosdelweb.com/f53/probl...tatico-728602/
y este ejemplo a ver si asi lo quieres
http://zoneartcss.com/ejemplos/css/r...ensionada.html
  #3 (permalink)  
Antiguo 07/09/2009, 13:10
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Background 100%

No se puede cambiar el tamaño de una imagen de fondo.

Y para lograr el efecto tenes dos opciones:

- Situar la imagen con un z-index bajo en relacion al resto del contenido, y con position:absolute. (si queres ampliamos el punto)
- poner un condicional para que la imagen de fondo sea otra, de diferente tamaño, si el usuario usa una resolucion mayor o menor, segun sea el caso.
  #4 (permalink)  
Antiguo 07/09/2009, 14:39
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 10 años
Puntos: 5
Respuesta: Background 100%

Cita:
Iniciado por alexk Ver Mensaje
Gracias Alex por tu respuesta, pero no es exactamente lo que busco.
__________________
Aprender J2EE en www.programacionj2ee.com.
Mi framework PHP D Framework.
  #5 (permalink)  
Antiguo 07/09/2009, 14:46
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 10 años
Puntos: 5
Respuesta: Background 100%

Cita:
Iniciado por mayid Ver Mensaje
No se puede cambiar el tamaño de una imagen de fondo.

Y para lograr el efecto tenes dos opciones:

- Situar la imagen con un z-index bajo en relacion al resto del contenido, y con position:absolute. (si queres ampliamos el punto)
- poner un condicional para que la imagen de fondo sea otra, de diferente tamaño, si el usuario usa una resolucion mayor o menor, segun sea el caso.
El primer punto lo entiendo perfectamente, el segundo no, ya que nunca he utilizado un condicional.

Pero te cuento cual es mi problema. Yo tengo un div, dicho div tiene un background con transparencia que digamos que hace de panel, para resaltar esa zona, segun la pagina que cargo en el div, ese div tiene diferente altura, la misma anchura, pero la altura varia, COMO EL BACKGROUND, tiene efectos de borde, no puedo repertirlo ni horizontal ni verticalmente, sino que se tiene que AJUSTAR al tamaño que presente el div en cada momento para seguir logrando el efecto deseado.

Se perfectamente desarrollarlo como dices en el primer punto.

#bg{
width:100%;
height:100%;
z-index:1;
position:absolute;
}

<img id="bg" src"..." alt="xxx" />

Y luego todo lo demas con un z-index mas alto... ¿Pero seguro que no hay otra manera de lograr esto?.
__________________
Aprender J2EE en www.programacionj2ee.com.
Mi framework PHP D Framework.
  #6 (permalink)  
Antiguo 07/09/2009, 15:48
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Background 100%

Hola:

Échale un vistazo a este enlace: http://www.cssplay.co.uk/layouts/background.html

Saludos.

  #7 (permalink)  
Antiguo 07/09/2009, 16:20
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Background 100%

jomaruro
no es eso pense igual pero dice que nop...

MiLLeN
un ejemplo de como lo quiere vendria bien!
  #8 (permalink)  
Antiguo 07/09/2009, 16:39
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Background 100%

Hay que ver la imagen... Pero no le veo solucion si es una foto con transparencia.

Segun la imagen lo permita, podes incrustarla en una tabla en vez de un div. Cosa aparatosa pero que funciona:

Cortas la imagen de fondo en partes (esto es facil, y los programas tipo photoshop te generan un html para que no tengas que llenar la tabla vos mismo).
Esta es la estructura resultante:
hhh
hxh
hhh

Las "h" son los bordes, y la x es una transparencia con repeticion.

Esto, en abstracto. Porque desconozco tu imagen de fondo.

Don x
  #9 (permalink)  
Antiguo 08/09/2009, 02:33
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 10 años
Puntos: 5
Respuesta: Background 100%

Os pongo un ejemplo, imaginaros un div, con unas dimensiones de 300x300 px, este div, tiene una imagen background y sus bordes, y al mismo tiempo, ese mismo div, se expande cuando el contenido lo requiere y se queda con un tamaño de 300x500 px, pero el background se adapta con el.

Considerar en las imágenes que el div es toda la imagen, y el background el rectángulo con bordes redondeados.

300x300:


300x500:
__________________
Aprender J2EE en www.programacionj2ee.com.
Mi framework PHP D Framework.
  #10 (permalink)  
Antiguo 08/09/2009, 14:14
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Background 100%

Hola:

Cita:
Iniciado por MiLLeN Ver Mensaje
imaginaros un div, con unas dimensiones de 300x300 px,
Pero, ¿esas dimensiones son fijas o es por poner un ejemplo? Porque si son fijas el div no aumentará cuando aumente el contenido.

Y otra cosa, ¿como es la imagen, una foto, un degradado, etc?

Saludos.

  #11 (permalink)  
Antiguo 09/09/2009, 08:13
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 10 años
Puntos: 5
Respuesta: Background 100%

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:



Pero, ¿esas dimensiones son fijas o es por poner un ejemplo? Porque si son fijas el div no aumentará cuando aumente el contenido.

Y otra cosa, ¿como es la imagen, una foto, un degradado, etc?

Saludos.

Lo primero es lo que trato de explicaros con las imágenes, el div siempre tiene la misma anchura, pero la altura es variable.

La imagen es lo que veis, diferente, pero viene a ser un panelcito, con los bordes redondeados y un color con transparencia, para distinguir esa zona del resto de una forma muy sutil.
__________________
Aprender J2EE en www.programacionj2ee.com.
Mi framework PHP D Framework.
  #12 (permalink)  
Antiguo 09/09/2009, 11:27
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Background 100%

Entonces esto que te dije de trozar la imagen, y ponerla en una tabla, valdria:

hhh
hxh
hhh

Por otro lado, quizas no necesites una imagen tan grande de fondo. Hay plugins para jQuery u otros frameworks que te hacen las puntas redondeadas. A estas le pones un filtro chiquito en formato png, y listo. Y si no quisieras usar frameworks, busca la manera de redondear las puntas con puro css, si fuera posible, y usar el pequeño filtro como te digo.

Cambiar el tamaño de una gran imagen de puntas redondeadas, como las que muestras, no se puede.
  #13 (permalink)  
Antiguo 09/09/2009, 17:45
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 10 años
Puntos: 5
Respuesta: Background 100%

Cita:
Iniciado por mayid Ver Mensaje
Entonces esto que te dije de trozar la imagen, y ponerla en una tabla, valdria:

hhh
hxh
hhh

Por otro lado, quizas no necesites una imagen tan grande de fondo. Hay plugins para jQuery u otros frameworks que te hacen las puntas redondeadas. A estas le pones un filtro chiquito en formato png, y listo. Y si no quisieras usar frameworks, busca la manera de redondear las puntas con puro css, si fuera posible, y usar el pequeño filtro como te digo.

Cambiar el tamaño de una gran imagen de puntas redondeadas, como las que muestras, no se puede.
La historia es que la pagina esta hecha con hijax, la parte con javascript esta construida con jQuery, pero la que no necesita javascript no, y lo primordial es su funcionabilidad sin javascript.

Al final creo que voy a dividir la zona en tres partes.

sss
xxx
zzz

Donde s y z es la parte superior e inferior respectivamente de la imagen, que siempre tendrán la misma anchura y altura, son las partes horizontales que contienen toda la anchura y la altura solo para que alcance lo que es la esquina redondeada.

De esa forma me quedaran 3 divs, el primero y el ultimo como ya he dicho invariables en tamaño con el background ajustado, y el único que variara sera el del medio, solo en altura, cuyo fondo sera 1 pixel repetido nxn veces, con la transparencia necesaria, que sera donde ira el contenido.

Creo que esta es una buena solución.

PD: Bueno, esto es si la imagen no tiene algún tipo de borde definido, si lo tuviera, s y z seguirían igual, y x, en vez de ser 1 pixel, seria una imagen de 1xn pixeles, y se repetiría solo verticalmente n veces.

Espero que esta idea os guste y sirva también a todos los que me habéis intentado ayudar.

Un saludo.
__________________
Aprender J2EE en www.programacionj2ee.com.
Mi framework PHP D Framework.

Última edición por MiLLeN; 09/09/2009 a las 17:51
  #14 (permalink)  
Antiguo 09/09/2009, 20:20
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Background 100%

ASegurate de que el alto automatico de xxx funcione en todos los navegadores. Especialmente en explorer (7).
  #15 (permalink)  
Antiguo 10/09/2009, 01:37
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 10 años
Puntos: 5
Respuesta: Background 100%

Cita:
Iniciado por mayid Ver Mensaje
ASegurate de que el alto automatico de xxx funcione en todos los navegadores. Especialmente en explorer (7).
Ok, ya te contare.
__________________
Aprender J2EE en www.programacionj2ee.com.
Mi framework PHP D Framework.
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 17:00.