Background 100%

[MiLLeN]

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.

[alexk]

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

[mayid]

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.

[MiLLeN]

Iniciado por alexk

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

Gracias Alex por tu respuesta, pero no es exactamente lo que busco.

[MiLLeN]

Iniciado por mayid

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

[jomaruro]

Hola:

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

Saludos.

[alexk]

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

MiLLeN
un ejemplo de como lo quiere vendria bien!

[mayid]

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

[MiLLeN]

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:

[jomaruro]

Hola:

Iniciado por MiLLeN

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.

[MiLLeN]

Iniciado por jomaruro

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.

[mayid]

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.

[MiLLeN]

Iniciado por mayid

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.

[mayid]

ASegurate de que el alto automatico de xxx funcione en todos los navegadores. Especialmente en explorer (7).

[MiLLeN]

Iniciado por mayid

ASegurate de que el alto automatico de xxx funcione en todos los navegadores. Especialmente en explorer (7).

Ok, ya te contare.