Style sheet images aren't reloaded by Firefox or Safari

Question

We have found out that Firefox (at least v3) and Safari don't properly cache images referenced from a css file. The images are cached, but they are never refreshed, even if you change them on the server. Once Firefox has the image in the cache, it will never check if it has changed.

Our css file looks like this:

div#news {
  background: #FFFFFF url(images/newsitem_background.jpg) no-repeat;
  ...
}

The problem is that if we now change the newsitem_background.jpg image, all Firefox users will still get the old image, unless they explicitly refresh the page. IE on the other hand, detects that the image has changed and reloads it automatically.

Is this a known problem? Any workarounds? Thanks!

EDIT: The solution is not to press F5. I can do this. But our clients will just visit our web site, and get the old, outdated graphics. How would they know they would need to press F5?

I have installed Firebug and confirmed what I already suspected: Firefox just doesn't even try to retrieve images referenced from a css file, to find out if they have been changed. When you press F5, it does check all images, and the web server nicely responds with 304, except for those that have changed, where it responds with 200 OK.

So, is there a way to urge Firefox to automatically update an image that is referenced from a css file? Surely I'm not the only one with this problem?

EDIT2: I tested this with localhost, and the image response doesn't contain any caching information, it's:

Server  Microsoft-IIS/5.1
X-Powered-By    ASP.NET
Date    Tue, 14 Oct 2008 11:01:27 GMT
Content-Type    image/jpeg
Accept-Ranges   bytes
Last-Modified   Tue, 14 Oct 2008 11:00:43 GMT
Etag    "7ab3aa1aec2dc91:9f4"
Content-Length  61196

EDIT3: I've done some more reading and it looks like it just can't be fixed, since Firefox, or most browser, will just assume an image doesn't change very often (expires header and all).

Answer 1

I would just add a querystring value to the image url. I usually just create a "version number" and increment it every time the image changes:

div#news {
  background: url(images/newsitem_background.jpg?v=00001) no-repeat;
  ...
}

Answer 2

To avoid such issue, I have seen webmasters adding version number to their files. So they load site-look-124.css and newsitem_background-7.jpg.

Not a bad solution, IMHO.