Using CSS Sprites and repeat-x background-position with transparent pixels

Question

I'm asking exactly what the title says...

#submenu-outer{
    height:40px;
    background: #F0EFE2 url(/template/img/main/intro12.png) 0px -240px repeat-x;
    width:100%;
}

That code makes no sense; Any suggestions? I want to repeat the first column of this line. Every other line (of 40px) is null there (0px -240px)

Answer 1

If you use repeat-x as background position it will repeat the whole width of the image file. So if you have transparent pixels in your sprite after 40px, it's actually normal that you get some transparent background every 40px or so.

You could either make your repeating pattern take the whole sprite width, or put it in a seperate file.