Caja con imagenes

rubenbb1994 · #1 (**permalink**) 16/06/2011, 08:19

Hola, no se si me explicado muy bien con el titulo, pero resulta que acabo de empezar en esto del css y he de hacer una pagina web para el colegio.
Resulta, que me encaprichado en hacer un fondo un tanto especial lo que quiero hacer es una imagen de fondo con un recuadro blanco en medio y hay escribir el texto. Quiero que quede como en la imagen puesto abajo, y en lo blanco que se ve escribir.

http://imageshack.us/photo/my-images/96/forot.jpg

cristian_cena · #2 (**permalink**) 16/06/2011, 11:12

Hola ruben:

Código HTML:

Ver original<body>
<div id="contenedor"></div>
</body>

Código CSS:

Ver originalbody{background:url(ruta/laimagen.xxx);}
#contenedor{ width: ...; margin: ... ; box-shadow: ... ; /* background: ... ;*/}

box-shadow es css3 y no funciona en todos los navegadores:
http://www.css3.info/preview/box-shadow/
Si no queda otra pones el fondo como imagen, generando divs extra y un sprite css o bien usando la imagen entera como fondo y height: ... ; pero ya te va a pesar mucho.

Saludos.

rubenbb1994 · #3 (**permalink**) 17/06/2011, 05:27

y no hay otra manera de ponerlo?

rubenbb1994 · #4 (**permalink**) 17/06/2011, 09:24

Al final me decidido por hacer la imagen de fondo ya hecha con el recuadro, pero resulta que ahora me gustaría saber como hacer que la parte de abajo se adapte a lo que ocupe el tamaño

cristian_cena · #5 (**permalink**) 20/06/2011, 00:08

Hola ruben:

Podes hacer que el div crezca y tener al mismo tiempo una imagen como fondo con los bordes degradados (en reemplazo de box-shadow) usando un sprite css y añadiendo cajas extras para mostrar los bordes.

Este ejemplo será útil para ilustrar el caso, luego lo completas a tu necesidad:
1ro en photoshop o similar creas la imagen para el sprite. Luego...

Código HTML:

Ver original<div class="top"></div> <!-- aca mostras la parte de la imagen con los bordes izq y der superiores -->
<div class="middle">... contenido ...</div>
<div class="bottom"></div><!-- aca mostras la parte de la imagen con los bordes izq y der inferiores-->

Código CSS:

Ver original/*el ancho y el sprite es comun para los 3 elementos*/
.top, .middle, .bottom {width:...;  background:url('ruta/imgsprite.xxx') 0 0 no-repeat;}
/*el alto de top y bottom generalmente es el mismo, middle crecerá según el contenido*/
.top, .bottom{height:...;}
 
.top{
background-position: ... ;
}
.middle{
background-position:... ;
background-repeat:repeat-y; /*repetis la imagen en y para que crezca según el contenido*/
}
.bottom{
background-position: ... ;
}

O usas esto, o usas css3 o usas una imagen fija como venis haciendo. Otra forma no conozco.

En el link que te pase en la respuesta anterior tenes un ejemplo de como hacer andar un sprite, si aún así siguen las dudas, podes leer el material que sugiero en ese mismo link, si aún así no logras entender como trabajar con sprites pregunta y lo vemos. Pero primero por favor lee el material.

Un saludo.