Circular parallax background positioning

Question

I'm using a script to move the background position a certain pixel distance based on mouse movement/phone movement. However, I'm having trouble coming up with a way to always have the background extending the entire width and height of the containing div. The script does work to move the background based on the mouse movement.. but it's moving the background image too much and it's causing white space.

Take a look at the fiddle and you'll see what I mean.

FIDDLE: http://jsfiddle.net/K9Ae7/2/

HTML:

<section id="court-fitness" data-parallaxify-background-range="30"></section>

CSS:

#court-fitness {
height: 500px;
width: 100%;
background:url('https://www.tourresource.com/Board/Themes/SMF_Grunge/images/bg.jpg');
background-repeat: no-repeat;
}

JS:

        $('#court-fitness').hover(function () {
        $(this).parallaxify({
            parallaxBackgrounds: true,
            useMouseMove: true,
            useGyroscope: true,
            inputPriority: 'mouse'

        });
    },

    function () {
        $(this).parallaxify('destroy');
    });

The rest of the script is in the fiddle. Thanks.

Answer 1

Check this out:

#court-fitness {
    height: 500px;
    width: 110%;
    margin-left: -5%;
    margin-top: -5%;
    background:url('https://www.tourresource.com/Board/Themes/SMF_Grunge/images/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    z-index: -1;
}

Fiddle