Occasionally my website's background JPEG doesn't fully load. Refreshing does not redownload. What can I do to prevent this?

I am hosting the site on Heroku. The image gets stops loading about 2/3 of the way down and the background color shows through. This has happened to me several times. Refreshing the page doesn't make it go away. The only 开发者_开发问答solution is to clear my cache. I obviously wouldn't expect my users to do this. Has anyone seen this before and/or know how to avoid it? I've seen this in OS X Chrome most recently, can't remember if I've seen it in other browsers. Here's my CSS.

body {
  background: #789cb5 url('/images/login_bg.jpg') center center fixed no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

---

It's best to do this with jQuery. You'll get stable results everytime and it's Cross browser compatible unlike background-size. We use an IMG tag to make it a background, it will automatically resize to fit window size. .

function bg() {
    var ww = $(window).width(),
        wh = $(window).height(),
        $bg = $('#bg');
    $bg.height(wh).width(ww);
}
bg();
$(window).resize(function() {
    bg();
})

Check working example at http://jsfiddle.net/njC4d/2/

---

Can you dynamically add a parameter to the image URL each time>

 background: #789cb5 url('/images/login_bg.jpg?12345')