A CodePen by Matthew Lehner.

index.html

<div id='background'>
  <div id='foreground'>
    Here we have a foreground object.
  </div>
</div>

script.js

document.addEventListener("DOMContentLoaded", function() {
  var background = document.getElementByID('background');
  
  if (window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', function(eventData) {
      var yTilt = (-(eventData.beta) + 90) * (20/180) - 20;
      var xTilt = (-(eventData.gamma) + 90) * (20/180) - 20;
      if (xTilt > 0) {
        xTilt = -xTilt;
      } else if (xTilt < -40) {
        xTilt = -(xTilt + 80);
      }
      var backgroundPositionValue = yTilt + 'px ' + xtilt + "px";
      
      background.style.backgroundPosition = backgroundPositionValue;
    }, false);
  } else {
    document.getElementById("foreground").innerHTML = "Not supported on your device or browser."
  };
});

style.css

#foreground {  text-align: center;
  padding: 20px;
  background: rgba(255,255,255,0.2);
  border-radius: 18px;
}

#background {
  margin: 0 auto;
  padding: 20px;
  padding-top: 100px;
  height: 568px;
  width: 320px;
  background-image: url('background.png');
  background-size: 360px 608px;
  background-position: -20px -20px;
}

body {
  margin:0;
  color: white;  font-family: "HelveticaNeue-UltraLight", "Helvetica Neue UltraLight", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 100;
  font-size: 2em;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}