CSS mobile background img moves

[tleon]

This code should stretch and fix background image, it stretches image and fixes but when I scroll on mobile, background img moves up and down on parts of img. It stays in full(no white parts of page) screen but it goes up and down. Here is the code, I have day/night imgs so I use JS in HTML.

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><img src="bg_day.jpg" alt="" /></div>');
}
else{
$('body').html('<div><img src="bg_night.jpg" alt="" /></div>');
}
&lt;/script&gt;

Live example(use mobile): http://www.testing.webatu.com
jsfiddle: [www. jsfiddle.net/bS53X]( http://www. jsfiddle.net/bS53X “www. jsfiddle.net/bS53X”)

[tleon]

yes and no, yes what you told and no it’s not only that, it moves on some parts on img. I use Safati on iOS.

[tleon]

Hi, I just made some more test and yes that is the problem is there any way to fix that?

[Author]

Posts