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

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