title: CSS background image bug in Chrome
body: <p>I'm having a weird bug in Chrome, I'm applying the following CSS rule to an element:</p>
  
  <pre><code>#element {
    background-color: #0E0F10;
    background-image: url(images/the_background.jpg);
  }
  </code></pre>
  
  <p>Now the first time I open a new page containing "#element", the background image isn't shown until I refresh the page cache with ctrl+f5.</p>
  
  <p>I tried adding Pragma, Expires and Cache-control meta tags and it don't make any difference.
  The only way to make the image to be shown at the first time is to put the absolute url in this way: </p>
  
  <pre><code>#element {
    background-color: #0E0F10;
    background-image: url(http://site.com/images/the_background.jpg);
  }
  </code></pre>
  
  <p>Now the problem is that I can't hardcode a site url, I need to use a relative or relative to the root path.</p>
  
  <p>Looking around I found a dirty trick for fixing a related bug in Chrome that coincidentally also fixs this problem: <a href="http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/" rel="nofollow">http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/</a></p>
  
  <p>Basically when I open the page the first time, all the background images are reloaded through JavaScript and from here on it works fine.</p>
  
  <p>However I would like to implement a more elegant fix or find the real cause of the problem.</p>
  
  <p>I'll appreciate any advice.</p>