Duda con Sprites CSS, se puede repetir una zona concreta?

[crash1912]

Buenas Tardes,
Tengo una duda respecto a los sprites css, había pensado crear un div de unos 700 pixels de ancho y unos 600(ó Xpx) de alto por ejemplo, y diseñar un fondo mediante una imagen que contenga los bordes redondeados, unas sombras, o lo que sea.

entonces, había pensado en crearlo de la siguiente forma:

Código PHP:

  <div style="width: 700px;"> 
    <div id="tapadera_arriba" style="width:100%;height:25px;background: url('img.png') top center no-repeat;"></div> 
    <div id="centro_contenido" style="width:100%;background: url('img.png')  center 50px  repeat-y;"> 
        ......................<br /> 
        ......................<br /> 
        ......................<br /> 
        ......................<br /> 
        ......................<br /> 
        ......................<br /> 
        ...................... 
    </div> 
    <div id="tapadera_abajo" style="width:100%;height:25px;background: url('img.png') bottom center no-repeat;"></div> 
</div>  
   

Pero el resultado está lejos de ser el deseado...:


En ésta última, he recortado manualmente una tira horizontal y he utilizado el mismo método,pero claro, ya son 2 imágenes...

En fin, no sé si lo que intento hacer en realidad se puede hacer, pero si se pudiera... mejoraría notablemente el rendimiento de mi sitio...

Gracias por adelantado por vuestra ayuda y espero haberme expresado bien

[rogertm]

Si entendí bien, estás usando imágenes para crear ese efecto de esquinas redondeadas y borde con sombra. Pues no los necesitas, tan solo con jugar con las propiedades border-radius y box-shadow es suficiente, si además de eso quieres que ese div tenga una altura fluida dependiendo del contenido, puedes usar overflow: hidden

Saludos.

[crash1912]

Iniciado por rogertm

Si entendí bien, estás usando imágenes para crear ese efecto de esquinas redondeadas y borde con sombra. Pues no los necesitas, tan solo con jugar con las propiedades border-radius y box-shadow es suficiente, si además de eso quieres que ese div tenga una altura fluida dependiendo del contenido, puedes usar overflow: hidden

Saludos.

Gracias por tu interés, pero me temo que esa no es una solución, ya que border-radius no es soportada en todos los navegadores, y no siempre es redondear una esquina la tarea... en cuanto overflow:hidden en este caso, no tiene ninguna utilidad, lo único que haría sería impedir que el contenido exceda de las dimensiones del div...

Espero que alguien pueda ayudarme con mi duda :)

[danielugalde]

No te conpliques la vida Amigo lo estas haciendo mal lo correco es hacerlo asi:

Este es el Html

Código HTML:

<div id="contenedor">
    <div id="top"></div>
    <div id="centro">
       <p>EN ESTA PARTE VA TU CODIGO</p>
    </div>
    <div id="buttom"></div>
</div>
 

Ahora el css:

Código CSS:

#contenedor{ width:200px; height:auto; display:inline-block; float:left; margin:15px 40px 15px 30px; position:relative;}
#top{ width:200px; height:7px; background:url(../img/top.png) no-repeat;}
#medio{ width:200px; height:auto; overflow:auto; position:relative; background:url(../img/medio.png) repeat-y;}
#buttom{ width:200px; height:6px; background:url(../img/buttom.png) no-repeat;}
 

Ahora solo te faltan las imagenes te recomiendo hacer 3 :

top.jpg o png
medio.jpg o png y
buttom.jpg o png

Ahora este es un ejemplo indepenndiente al tuyo esta es una buena tecnica sabiendola aplicar, te dejo de referencia esta pagina en la cual utilice esta tecnica.

Este es ell link
Saludos.

[alexk]

crash1912 es importante saber si el fondo de tu div con bordes redondeados es un color plano para usar el sprite del bloque en JPG con un color solido de fondo... sino aplica la tecnica de danielugalde
si es un color solido de fondo... tienes que cortar la imagen del bloque en 3... (top, centro y pie) y en tu sprite las colocas una junto a otra (una fila de 3)... donde "top y pie" no se repetiran y "centro" se repetira verticalmente...

PD: hay otra alternativa usando pseudoclases :before y :after, (para no usar etiquetas vacias) pero no es compatible en todos los navegadores (solo desde IE8) para cualquiera de los casos usa el buscador es un tema ya tratado