Hi~I have been making changes to my site and backing up my work. The background images that are used in the CSS have stopped displaying correctly in most browsers. What could cause this?

I thought it was a new sprite that I had created. I had changed the css, and find out it had errors, so I replaced it with the old CSS to see if that would fix it. No it didn't fix it. The images still weren't showing, so it seems that it isn't the CSS file, but something is causing the css file to not display correctly. I have been backtracking my work. The funny thing is that it does o.k in some browsers now and yesterday it was all fine. It just suddenly appeared overnight.

If it worked yesterday I would think that it must have been something I did then. But I don't think so.

Thanks for your reply. Well yes and no. Yes it's probably a problem-which I am not sure how to properly code-I am far from an expert, but it doesn't seem to be the reason why those images aren't displaying since:1. I replaced the css file with the old css (without the sprite/errors) and the images still didn't show.2. Even with those errors everything was fine for about 5 days. And then I woke up today with this problem.

CSS validator said this, for example is an error: .right{background-image: (#nav-right_jpg); before it was a sprite it said .right{background-image: url(nav-right.jpg);

So I tried to match it with the info given by the sprite generator. Probably a feeble attempt, but it was working.

Why do you have those hash tags in the file names of each image? Take those out.Also, where in the HTML do you assign the classes to the HTML elements? Aka .sprites{}. There isn't a single element in the HTML that has that class added to it.

Haha, I figured something out. I cleared my browsers cache. I put the old code back. Yeah so the problem is with my poor css sprite work. The hashtags were given by the sprite generator like this for example: #nav-right_jpg { height : 35px; width : 11px; background-position : -962px -0px; }

So that's why I added the .right{background-image: (#nav-right_jpg); to replace the .right{background-image: url(nav-right.jpg);

I thought that did the trick but I was wrong right? You have mentioned html, so how would i code this in the html index.php/template?

Before I had the sprite I had this code for example:.homeleft-box .bottom{background-image:url(../images/left-bot.jpg);background-repeat:no-repeat;background-position:left bottom;padding:15px 13px;min-height:312px;_height:auto!important}

But I don't want it to go here: url(../images/left-bot.jpg); I want it to use this image from the sprite: #left-bot_jpg{height:37px;width:232px;background-position:-246px 0}

I want to use the image in the sprite. So to me it seems like that is the part that I must change.