Force browser to re-read cached images

Question

.button { background: url(../Images/button.png); }

Problem: for performance reason all static content has expiration headers and is cached by browser. When image changes user must refresh cache (Ctrl+F5 in IE). I want images to be cached, but when necessary they must be automatically reloaded.

Question: is next approach 'valid'?

.button {
    background: url(../Images/button.png?v=1234);
}

where v=1234 is version of my site. I do not know whether it is 100% valid to write such things in CSS and I do want browsers to still cache images if version is the same. Do all modern browsers correctly cache data with URL parameters part?

Thanks.

Answer 1

That looks like a good approach to me, it'll work fine in CSS in modern browsers - the browser will look at the address of the image (including the ?v=1234), see that it's not cached, and send a fresh request.