title: How to make this parallax animation responsive by bootstrap?
body: <p>I just made a responsive animation with the help of <a href="https://github.com/wagerfield/parallax" rel="nofollow">Parallax.js</a>. Also i used bootstrap 2 to make responsive and working in mobile devices also. What i made is <a href="http://engineervilla.com/reupp" rel="nofollow">here</a>...
  my code is</p>
  
  <pre><code>    &lt;style&gt;
          .container ,.container img {
              position: fixed;
          }
          .container {
          width: 1404px;
              margin-left: -30px;
              margin-top: -22px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;  
          &lt;ul id="scene" class="scene"&gt;
              &lt;li class="layer" data-depth="0.10"&gt;
                  &lt;img src="img/back.png" alt=""&gt;
              &lt;/li&gt;
  
              &lt;li class="layer" data-depth="0.60" style="z-index:1;"&gt;
                  &lt;img src="img/page.png" alt=""&gt;
              &lt;/li&gt; 
              &lt;li class="layer" data-depth="0.06"&gt;
                  &lt;img src="img/tree.png" alt=""&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul id="scene1" class="scene"&gt;
              &lt;li class="layer" data-depth="0.20" style="z-index:-1;"&gt;
                  &lt;img src="img/alien.png" alt=""&gt;
              &lt;/li&gt; 
              &lt;li class="layer" data-depth="0.40" style="z-index:2;"&gt;
                  &lt;img src="img/money.png" alt=""&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.parallax.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $('#scene1').parallax({
          invertX: true
      });
      $('#scene').parallax({
          invertX: false
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>now problem is the image size should be large and fixed. so i have to use position:fixed and width: some large value but by doing that i loose the responsiveness of my div container. So is there anyway to make this work so that  it remain responsive  along with fixed positioning and  width. help me ASAP. thanks</p>