title: parallax/ken burns effect without scroll
body: <p>Ok so I am applying a parallax/ken burns effect on an image but I am not convinced the method I am using to do this is that good. It works well on webkit browsers, but is not very smooth on firefox and does not work at all in IE</p>
  
  <p>It's pretty simple I have a background image in a div and on window load I apply a class called pan that changes the background position.</p>
  
  <p>Would anyone have any ideas for a way of achieving this effect that would be SMOOTH and pan nicely.</p>
  
  <p>Here is the site <a href="http://dev.touch-akl.com/xmas/" rel="nofollow">http://dev.touch-akl.com/xmas/</a></p>
  
  <pre><code>#banner{
    background-size: 100%;  
    background-attachment: fixed;
    background-repeat:no-repeat;
    background-position:0 0;
    padding-top:35.15625%;
    -o-transition-duration: 10s;
    -ms-transition-duration: 10s;
    -moz-transition-duration: 10s;
    -webkit-transition-duration: 10s;      
    }
  </code></pre>
  
  <p>At one point I even had a small scale on the .pan class that looked great in chrome but was even worse on firefox</p>
  
  <pre><code>  #banner.pan{
      background-position:0 160%;   
    }
  </code></pre>