CODEWITHSUNDEEP
css
drake035
drake035

Reputation: 2877

Forcing refresh of a background image

Is there a way to make sure that a certain background image recently updated does appear in its last version on everybody's browser (rather than the old version stored in cache)?

It has to be a solution not involving touching the line of code calling the CSS (I could put a question mark and a version number after the css file name, like : <link href="styles.css?v=2" rel="stylesheet" type="text/css"/>, but in this case I don't have access to this part of the code)

Upvotes: 20

Views: 27278

Answers (4)

Murali Murugesan
Murali Murugesan

Reputation: 22619

Few things i like to put here

  1. Images, JS, CSS files referred in HTML pages are cached in browser based on the URL
  2. Change in URL will issue a new request to server and store the latest in cache.

All you need to do is Change URL .

Though you modified css style sheet, you need to update HTML for CSS reference.

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

Ex: http://www.site.com/css/style.css to http://www.site.com/css/style.css?ver=002

<link rel="stylesheet" href="css/style.css?ver=002" type="text/css" />

Upvotes: 1

SMacFadyen
SMacFadyen

Reputation: 3165

You could add a Expires in htaccess, but If the image is really large then I would advise against this. As you ask without CSS, try: 

<Files "your_bg.jpg">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</Files>

Upvotes: 0

Guffa
Guffa

Reputation: 700192

You can add another CSS rule after the other CSS, that overrides the rules that loads the image and uses an image with an added version number.

CSS rules loaded later have higher priority, so you can use the same selector as in the main CSS, and it will override it.

If you can't do that, then you are screwed. You have to change the URL of the image that is loaded to surely get the new image.

Upvotes: 1

Anshu
Anshu

Reputation: 7853

You can use the following approach:

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

Upvotes: 32

Related Questions