Background position seems to be inaccurate

$('#switcher').click(function () {
    if ($(this).hasClass('main')) {
        $(this).html('Put mask on top').removeClass('main');
        $('#main').css({
            zIndex: 1
        });
        $('#mask').css({
            zIndex: 2
        });
    } else {
        $(this).html('Put main on top').addClass('main')
        $('#main').css({
            zIndex: 2
        });
        $('#mask').css({
            zIndex: 1
        });
    }
});

img {
    width: 100%;
    height: 100%;
}
#wrapper {
    position: relative;
    width: 390px;
    height: 300px;
}
#main {
    z-index: 2;
}
#mask {
    z-index: 1;
}
#main, #mask, .part {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.part {
    width: 130px;
}

.part img {
    margin-left: 0;
    width: 390px;
    height: 300px;
}

.part2 {
    left: 130px;
}

.part2 img {
    margin-left: -130px; 
}

.part3 {
    left: 260px;
}

.part3 img {
    margin-left: -260px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
    <div id="main">
        <img src="http://images.all-free-download.com/images/graphiclarge/grasshopperpraying_mantis_195444.jpg" />
    </div>
    <div id="mask">
        <div class="part part1"><img src="http://images.all-free-download.com/images/graphiclarge/grasshopperpraying_mantis_195444.jpg" /></div>
        <div class="part part2"><img src="http://images.all-free-download.com/images/graphiclarge/grasshopperpraying_mantis_195444.jpg" /></div>
        <div class="part part3"><img src="http://images.all-free-download.com/images/graphiclarge/grasshopperpraying_mantis_195444.jpg" /></div>
    </div>
</div>
<br>
<button id="switcher" class="main">Put mask on top</button>