CSS移动背景图像移动

Question

此代码应该拉伸并修复背景图像，它会拉伸图像并修复但是当我在移动设备上滚动时，背景img会在img的部分上下移动。它保持完整（没有页面的白色部分）屏幕，但它会上下移动。这是代码，我有日/夜imgs所以我在HTML中使用JS。

CSS

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

---

HTML

<script>
var d = new Date();
var n = d.getHours();

if(n >= 6 && n <= 20){
$('body').html('<div id="bg"><img src="bg_day.jpg" alt=""></div>');
}
else{
$('body').html('<div id="bg"><img src="bg_night.jpg" alt=""></div>');
}
</script>

现场示例（使用移动设备）： testing.webatu.com

jsFiddle Example