Sprites Avanzados

[Ju4mPy]

Hola gnte, resulta que tengo un div al que lo llamo header.
Este mismo deberia de tener un background con repeat-x de una imagen spriteada.

(Esta es la imagen spriteada)



El background del div seria la parte en azul de la imagen anterior (esa seria la textura que iria cn el repeat-x... repito la imagen azul)

resulta que intente de la siguiente manera:

Código HTML:

.head{
	height:54px;
	width:100%;
	background:url('images/sprites/index.png');
	background-repeat: repeat-x;
	background-position: -2px 0px;
}

Pero no sucede lo esperado... alguien sabe como hacerlo?

NOTA: Las coordenadas de la textura azul en el sprite son: -2px 0px

Gracias.

[DragonX]

cuando un background se repite en X o en Y tenes que armar un scprite por separado, ya que si utilizas el sprite comun lo que repite es toda la imagen, no las coordenadas, me explico?

[sanxuan]

Otros llegamos a la misma conclusión que tú hace tiempo. CSS2.1 es algo grande pero aún se nos queda muy pequeño.
Si quieres usarlo con un repeat-x debes colocarlo ocupando la totalidad del ancho de tu imagen. Debes decidir si compensa o no incluirlo en el archivo de sprites. Yo uso a menudo tres archivos de sprites. Uno para imágenes en vertical, otro para imágenes en horizontal y otro para imágenes que tienen un ancho y alto determinados. En este último caso pueden ir todos los sprites uno al lado del otro. En los dos casos anteriores deben ir todos bien en horizontal uno al lado del otro o bien en vertical uno sobre otro.
Parece que esto cambiará en breve, pero de momento yo sigo trabajando así.
Por cierto, todo este conocimiento no viene incluido en mis genes, tampoco es que haya estudiado tanto, ha sido a causa del viejo método de ensayo y error.

[Ju4mPy]

gracias muchachos me entendi clarisimo, voy a probar y paso a comentar comoi me fue (voy a hacer lo de sanxuan) gracias a los 2 ;)