Untitled

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#" class=" js cssanimations" title="" autocomplete="off">
<head>
  <meta charset="utf-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
  <style>
    body {
      height: 2000px;
      position:relative;
      margin:0;
      padding:0;
    }

    div.background-image {
      position:relative;
      height:50%;
      width:100%;
      background-image: url('http://previews.123rf.com/images/lucvar/lucvar1205/lucvar120500028/13758606-Landscape-with-portrait-orientation-of-a-beach-with-people-bathing-walking-or-lying-on-the-beach-in--Stock-Photo.jpg');
      background-size: contain; /* Can add cover instead of contain if needed, or specify the width and height */
      background-position:center center;
      background-repeat: no-repeat;
      background-attachment: fixed; /* This is the trick */
    }

    .img_wrap {
      position: absolute;
      width: 500px;
      height: 1000px;
      top: 0;
      left: 50%;
      margin: 0 0 0 -250px;
      overflow: hidden;
    }

    #img{
      position: absolute;
      display: block;
      top: 0;
      left: 0;
    }
  </style>
  <script>
    var latestKnownScrollY = 0,
            ticking = false;

    function onScroll() {
      latestKnownScrollY = window.scrollY;
      requestTick();
    }

    function requestTick() {
      if(!ticking) {
        requestAnimationFrame(update);
      }
      ticking = true;
    }

    function update() {
      ticking = false;

      var currentScrollY = latestKnownScrollY;
      document.getElementById("img").style.transform = "translate(0, "+ currentScrollY+"px)";
      document.getElementById("img").style.WebkitTransform = "translate(0, "+ currentScrollY+"px)";
    }

    /* No need to process such a function using JS
//    window.addEventListener('scroll', onScroll, false);
  </script>
</head>
<body>
<div class="background-image">

</div>
</body>
</html>