para que hagas una prueba...
a ese codigo que dices que te funciona bien.. agregale
NO-REPEAT al background...
el valor por defecto es que SI repita (repeat )
Código CSS:
Ver originalbackground: transparent url(../img/transparent.png) [B]no-repeat[/B];
y luego de que veas para que sirve... (o como funciona)
agregale tambien el no-repeat al sprite....
veras que los 2 tienen el mismo cuadrito en la parte superior izquierda
--------------------------
y por ultimo ... quitale el no-repeat....
que sucede ? (cuando no tiene ese valor, por defecto repite la imagen)
en el caso del que "SI funciona" es por que solamente tienes 1 imagen (../img/transparent.png)
y al momento de repetir.. se ve todo parejo
sin embargo con la imagen del sprite no es igual... por que tienes imagenes mezcladas, y se REPITEN esas... empezando por el cuadrito de 20x20 y repitiendose el resto (de la imagen.. no solo del cuadrito)
----------
por lo tanto... si quieres usar un sprite (parte de una imagen) para que llene un fondo, ya que NO PUEDES usar el repeat (por lo mencionado anteriormente ) la unica forma es ESCALAR (como indique en el post anterior -ver ejemplo en fiddle ) para llenar es espacio del contenedor