title: Layering images using CSS and absolute positioning
body: <p>I have a webpage, where I am wanting to layer 3 images accordingly to act as a backgound so content can be placed on top. The images shouldn't move when scrolling, so fixed position wouldn't work.
  Below is the sequential order they should appear from back to front (1-3)</p>
  
  <ol>
  <li>img - sky.jpg which I set as the background image in the html.</li>
  <li>img - backDrop.png which is set above the sky.jpg.</li>
  <li>img - BtmRight.png which I want to position above all images and bottom right.</li>
  </ol>
  
  <p>Both images (backDrop.png, BtmRight.png)are set with absolute positioning and z-index to determine order.
  I cant get BtmRight.png image to appear bottom right above other images. I want the bottom right image to stay in place when you scroll the page. I would also like the content to appear over all the images.
  Below is my HTML/CSS, Is there something I'm missing?</p>
  
  <pre><code>            &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
              &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
              &lt;head&gt;
              &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
              &lt;title&gt;Untitled Document&lt;/title&gt;
              &lt;/head&gt;
              &lt;style type="text/css"&gt;
              html {
                height: 100%;
                margin: 0;
                padding: 0;
                margin-top:100px;
                background: url(sky.jpg) no-repeat center center fixed; 
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                 background-size: cover;
              }
              body {
                height: 100%;
                margin: 0;
                padding: 0;
              }
              #imgBack {
                  width: 100%;
                  margin-top:100px;
                  position:absolute;
                  z-index:20;
                  border:#0FF thin solid;
              }
              #imgBtmRight {
                  position:absolute; 
                  z-index:50; 
                  bottom:0; 
                  right:0;
              }
              &lt;/style&gt;
  
              &lt;body&gt;
  
              &lt;img id="imgBtmRight" src="BtmRight.png" width="413" height="283" /&gt; 
  
  
  
              &lt;img id="imgBack" src="backDrop.png" /&gt;
  
              &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>
  
  <p>Any light on the subject, or assistance would be greatly appreciated. Thanks</p>