title: CSS Javascript Pseudo-perspective background motion on side scroll for game
body: <p>So here is the idea, creating a sidescrolling game from JS, and working on the enviroment. The foreground element is set to scroll normally, the background elements are fixed (sky, sun). I have a middleground element that I want to scroll along with the foreground, but I want it to move in smaller 'porportion' to the foreground. It is a fixed element of the page, so I suppose that I will probably need to access the layer and adjust the background-position, but I am not sure how to accomplish this in javascript. Would really like to leave jquery out of the equation and go just with the JS and CSS.</p>
  
  <p>CSS code:</p>
  
  <pre><code>&lt;style&gt;
  body{ background: #5993fc; text-align: center; height:100%; width:100%;
    padding: 0; margin: 0; overflow-x: auto; overflow-y: hidden; }
  .sun{ position:fixed;     height: 320px;   width: 320px;     z-index: 10;  
    background-image: url('wasteland/wasteland_sun.png'); opacity: .9;}
  .cloud{ position:absolute;  height: 160px;   width: 800px;     z-index: 30;  
    background-image: url('wasteland/wasteland_cloud.png'); }
  #ground{ position:absolute;  height: 169px;   width: 10000px;   z-index: 130; 
    background-image: url('wasteland/wasteland_foreground.png');bottom: 0px;left: 0px; }
  #middleground   { position:fixed; height: 244px; width: 100%; z-index: 129; 
    background-image: url('wasteland/wasteland_middleground.png');bottom:80px;left:0px; }
  &lt;/style&gt;
  </code></pre>
  
  <p>You can see an example of the actual page and issue <a href="http://thomasrcheney.com/games/wasteland-perspective.html" rel="nofollow">http://thomasrcheney.com/games/wasteland-perspective.html</a></p>
  
  <p>and a jsfiddle here <a href="http://jsfiddle.net/K5f7b/" rel="nofollow">http://jsfiddle.net/K5f7b/</a></p>
  
  <p>The only thing I can think of after pondering is an event listener attached to the arrowkey, but that would be useless if the user were to grab and drag the scrollbar. Just not even sure how to best approach writing a function to handle this. </p>