Css Sprites Background

[crashb648]

I've been using CSS sprites for a while now, mainly using it for icons, but I want to sprite up my backgrounds too. All the backgrounds I want to sprite I want to repeat Horizontally (left to right) but I can't get it too work. I know you can repeat in one direction only with CSS sprites, but it still wont work.

#header  {width: 100%; height: 215px;background:transparent url('files/site/spritebg.png') repeat top left; background-position: 0;} .sitemenu {float:left; width:690px; height:35px;  color:#FFF; font-size:13pt; background-image:url(files/site/spritebg.png); background-repeat: repeat-x; background-position: 220px 0;}

Here's two examples of the codeof two sprites I want to repeat, but both just display the image with huge gaps. Here's a link to the css image: http://i475.photobuc...48/spritebg.png Any help in getting this to work will be great. Its really getting on my nerves now!

[newseed]

If you want horizontal repeat background then the sprite width needs to be only 1px wide. Now based on that screen shot you've provided I am seeing two long red and blue bars that are wider than the rest of the gradient colors. To verify for sure, just open up your sprite. If you have transparence or blank space then that is where you gap is coming from.