title: Dynamically loaded CSS background-image not shown in Chrome
body: <p>I am making a github gist gallery for organizations, which you can see at <a href="http://elsherbini.github.io/gist-gallery" rel="nofollow">elsherbini.github.io/gist-gallery</a>.</p>
  
  <p>The thumbnails are placed on the page by javascript, and the background image is set as an inline style rule. In Firefox and Internet Explorer the background image is shown, while in Chrome and Safari it is not.</p>
  
  <p>In firefox, the following code returns the correct url of the background image, while in chrome it returns <code>"none"</code>:</p>
  
  <p><code>$($(".thumbnail")[0]).css("background-image")</code></p>
  
  <p>As a result I cannot use <a href="http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/" rel="nofollow">the following fix by andrew cantino</a>:</p>
  
  <pre><code>function refreshBackgrounds(selector) {
    // Chrome shim to fix http://groups.google.com/a/chromium.org/group/chromium-bugs/browse_thread/thread/1b6a86d6d4cb8b04/739e937fa945a921
    // Remove this once Chrome fixes its bug.
    if (/chrome/.test(navigator.userAgent.toLowerCase())) {
      $(selector).each(function() {
        var $this = $(this);
        if ($this.css("background-image")) {
          var oldBackgroundImage = $this.css("background-image");
          setTimeout(function() {
            $this.css("background-image", oldBackgroundImage);
          }, 1);
        }
      });
    }
  }
  </code></pre>
  
  <p>I have tried adding single quotes to the url as some have suggested when similar issues have arisen for others. If I look at the network tab, it never even makes requests for the images. If I manually set the background image property as a new rule in chrome devtools, it works, so I know it is not an issue with the format of the url or a silly syntax error. </p>
  
  <p>Is there a workaround to this bug in chrome? </p>