Site loads Sprite Image twice

I have been trying to speed up my website, and in doing so I combined a number of my images into a sprite file. Everything works great now, however, when I run the site, either locally or on the test site it loads开发者_JS百科 the sprite file twice, and I can't for the life of me figure out why. I am using masterpages with asp.net, and I only have one css file, not including the css files that some of my telerik controls use, and I have not tampered with any of the telerik css files or sprites. You can venture to our test site at: http://www.myheadpiece.com/test and take a look. The name of the sprite file is ms1.png. I can also provide other code/answers where necessary, I am just not sure what/where to look. If anyone has any ideas please let me know. Thanks.

Check the case of the paths to the sprite, you have

http://www.myheadpiece.com/test/Images/Structure/ms1.png

and

http://www.myheadpiece.com/test/images/Structure/ms1.png

One is with a capital "I" the other one with a small "i". So in you CSS you should refer to the sprite either with "Images" or with "images".

Your css should look like this:

.Sprite { background-image: url("../Images/Structure/ms1.png"); background-color: transparent; background-repeat: no-repeat; }

.HeaderLogo { background-position: 0 -768px; ... other styles ... }

.CartButton { background-position: -818px -754px; ... other styles ...}

And both HeaderLogo and CartButton should have second css class assigned ('Sprite') so you load an image only once for Sprite class and all the elements that are going to use it change it position only.