Animated body background image with jquery

Question

I have a problem with this code:

// Global Variables

var scrollSpeed = 50;
// set the default position
var current = 0;
// image height & rotation complete
var _ht, _finishNRot = false;
// set the direction
var direction = 'h';
// create hidden image element to grab height of it for calculation purpose
var url = $('body').css('background-image').replace(/^url\(["']?/,     '').replace(/["']?\)$/, '');
var bgImage = $('<img />');
bgImage.hide().bind('load', function () { _ht = $(this).height(); });
$('body').append(bgImage);
bgImage.attr('src', url);

function bgscroll() {
    // while rotation not completed 
    if (_finishNRot == false) { current -= 1; } else { current += 1; };
    // -ve Rotation completed
    if (-(current) == _ht) _finishNRot = true;
    // +ve Rotation completed
    if ((current) == 0) _finishNRot = false;
    // move the background with backgrond-position css properties
    $('body').css("backgroundPosition", (direction == 'h') ? current + "px 0" : "0 " + current + "px");
}

//Calls the scrolling function repeatedly
setInterval(bgscroll, scrollSpeed);

when I have screen resolutions like 1024 or 1480 the background image does not reach its final pixel (horizontally) or exceeds its final pixel (horizontally), how could I fix that? Here's an example online: http://www.ideas-web.net63.net/prueba/prueba.html

Answer 1

Add: // Global Variables

var size = window.outerWidth; 

Change:

bgImage.hide().bind('load', function () { _ht = $(this).height(); });

to

bgImage.hide().bind('load', function () { _ht = $(this).width(); });

and change:

if (-(current) == _ht) _finishNRot = true;

to

if ((size-current) > _ht) _finishNRot = true;