Repetir imagen CSS Sprite

[Espeacke]

Hola.
Tengo una imagen generada para css sprite pero veo que las imagenes se generan en fila hacia abajo, asi como esta:




Lo que busco es repetir la imagen roja para un menu horizontal como este:



El problema es que al usar "repeat-x" me muestra el "lado derecho gris" de la primera imagen es decir todo el ancho no solo el lado "rojo".

Se ve asi:



QUIERO QUE SE MUESTRE SOLO EL COLOR ROJO COMO FONDO.

¿Como logro esto?
¿Necesito crear la barra completa de 1000px?

(las imagenes y colores solo son de referencia la imagen que planeo usar es un gradient)

Saludos y gracias por su tiempo.

[DragonX]

siempre el preferible trabajar con 3 clases de sprites.
1) para tus iconos e imagenes que no se repiten
2) para imagenes que se repiten en X
3) para imagenes que se repiten en Y

[Espeacke]

Listo!! gracias por tu ayuda, lo he conseguido de la forma que me dijiste.

¿Para imagenes que contengan enlaces (como botones) que no sean background tambien funciona css sprite?

[emiliodeg]

claro que si lo q puedes hacer es por ejemlo algo asi

Código HTML:

<a href="" class="sprite masinfo"><img src="sprite.png" alt=""/></a>
 

y el css

Código CSS:

/*propiedades comunes*/
.sprite{position:relative;overflow:hidden}
.sprite img{position:absolute}
/*supongamos que deseamos mostrar una imagen dentro del sprite de 20x20*/
.sprite.masinfo{display:inline-block;width:20px;height:20px}
/*ubicada en las coordenadas 15:50*/
.sprite.masinfo img{left:-15px;top:-50px}
 

espero te sirva la ayuda