Как анимировать фон состоящий из 2ух картинок?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section-1" id="container">
  Lets start!
</div>
<div class="container section-2">
  There is more cool stuff below...
</div>
<div class="container section-3">
  We are done with cool things!
</div>

var velocity = 0.5;

function update() {
  var pos = $(window).scrollTop();
  $('.container').each(function() {
    var $element = $(this);
    var height = $element.height() - 18;
    $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px');
  });
  $('#container').css('backgroundPosition', '50% ' + Math.round(($('#container').height() - pos) * velocity) + 'px' + '50% ' + Math.round(($('#container').height() - pos / 2) * velocity) + 'px');
};

$(window).bind('scroll', update);

.container,
#container {
  padding: 200px 20px 200px 20px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
}

.section-1 {
  background: url(https://www.logaster.ru/blog/wp-content/uploads/2014/06/img_514.png), url(http://static4.wikia.nocookie.net/__cb20130612023354/harrypotter/images/d/d1/Gradient-blue-background.jpg);
  background-position: center, center;
}

.section-2 {
  background-image: url(http://th00.deviantart.net/fs49/PRE/f/2009/207/e/d/Orange_Desktop_Background_by_The_Dogfather.png);
  background-position: center;
}

.section-3 {
  background-image: url(http://oaklandbaptist.org/media/Green-Background.jpg);
  background-position: center;
}