Forzar la actualización de una imagen de fondo

Question

¿Hay alguna manera de asegurarse de que cierta imagen de fondo recientemente actualizada aparezca en su última versión en el navegador de todos (en lugar de la versión anterior almacenada en la memoria caché)?

Tiene que ser una solución que no implique tocar la línea de código que llama al CSS (podría poner un signo de interrogación y un número de versión después del nombre del archivo css, como: <link href="styles.css?v=2" rel="stylesheet" type="text/css"/>, pero en este caso no tengo el acceso a esta parte del código)

Answer 1

Se puede utilizar el siguiente enfoque:

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

Answer 2

puede añadir otra regla CSS tras otro CSS, que anula las reglas que carga la imagen y utiliza una imagen con un número de versión agregado.

Las reglas de CSS cargadas posteriormente tienen una prioridad más alta, por lo que puede usar el mismo selector que en el CSS principal, y lo anulará.

Si no puede hacer eso, entonces está jodido. Tienes que cambiar la URL de la imagen que está cargada para obtener la nueva imagen.

Answer 3

Puede agregar Expires en htaccess, pero si la imagen es realmente grande, le aconsejaría que no lo haga. Como le preguntas sin CSS, intente:

<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> 

Answer 4

Pocas cosas me gusta poner aquí

1. Imágenes, JS, archivos CSS que se hace referencia en las páginas HTML se almacenan en caché en el navegador basado en la URL
2. Cambio en URL emitirá una nueva solicitud al servidor y almacenará la última en caché.

Todo lo que tienes que hacer es cambiar URL.

Aunque modificó la hoja de estilo CSS, debe actualizar HTML para referencia de CSS.

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

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

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