<div id="homePageHeaderBgImage"><!-- no need for content --></div>
<div id="homePageHeaderBgImage2"><!-- no need for content --></div> 

<div class="my-container">
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
</div>

html,body{margin:0;padding:0;}
#homePageHeaderBgImage,
#homePageHeaderBgImage2 {
	position:fixed;
	left:0;
	right:0;
	top:0;
	height:100vh;
	background:url(http://www.pmob.co.uk/temp2/images/fixed-01.jpg) no-repeat;/* default image*/
	background-size:cover;
	z-index:-2;
}
#homePageHeaderBgImage2{
	z-index:-1;
	background-image:none;
}
.my-container {
	background:#fff;
	margin-top:100vh;
}

//requires jquery
(function($) {
  var count = 0;
  var milliseconds = 8000;
  var transitionTime = 3500;
  var selector1 = "#homePageHeaderBgImage";
  var selector2 = "#homePageHeaderBgImage2";
  setInterval(function() {
    //Array to store image urls(replace with the urls of your images)
    var images = [
      "http://www.pmob.co.uk/temp2/images/fixed-02.jpg",
      "http://www.pmob.co.uk/temp2/images/fixed-03.jpg",
      "http://www.pmob.co.uk/temp2/images/fixed-04.jpg",
      "http://www.pmob.co.uk/temp2/images/fixed-05.jpg",
      "http://www.pmob.co.uk/temp2/images/fixed-06.jpg"
    ];

    var tempImage = new Image();
    tempImage.src = images[count];
    $(tempImage).on("load", function() {
      //begin event
      $(selector1)
        .css("opacity", "1")
        .animate(
          {
            opacity: 0,
            specialEasing: {
              width: "linear",
              height: "easeOutBounce"
            }
          },
          {
            duration: transitionTime,
            complete: function() {
              $(selector1).css(
                "background-image",
                "url(" + tempImage.src + ")"
              );
            }
          }
        );
      $(selector2).css("background-image", "url(" + tempImage.src + ")");

      $(selector2)
        .css("opacity", "0")
        .animate(
          {
            opacity: 1,
            specialEasing: {
              width: "linear",
              height: "easeOutBounce"
            }
          },
          {
            duration: transitionTime
          }
        );
    });
    if (count < images.length - 1) {
      count++;
    } else {
      count = 0;
    }
  }, milliseconds);
})(jQuery);