some background images in css don't load

Question

I've just uploaded a website from my computer to a remote server.

everything was working on my local machine, and works on the remote server - aside from 1 background image!

all images are in the same directory, with same permissions. just the 'Main-Header-graphic.jpg' doesn't work. I have this in my CSS:

/* this works */
#top_header #logo {
float: left;
background: url(../img/Logo.png) no-repeat;
width: 403px;
height: 52px;
text-indent: -9999px;
}

/* this doesn't! 
   if i replace the "../img/Main-Header-graphic.jpg" below with another image, eg.
   the "../img/Logo.png" above, it works! */
#middle_header {
margin-top: 10px;
height: 280px;
background: url(../img/Main-Header-graphic.jpg) no-repeat;
}

so as you see the paths to images are all the same, and work in the same format with all the other background images. Just the middle_header background doesn't work! any ideas?

thanks, Patrick

Answer 1

Only thing I can think of is that it might be something wrong with the image itself. Try opening the image in Photoshop, and if you can, save it to another format - or as a .jpg with some different compression settings. Then re-upload and see if it works.