title: Move image behind the main content CSS
body: <p>I have a problem with some css in my website </p>
  
  <pre><code>this is the main CSS source :
  /* html selectors ---- */
  
  html, body {
      font-family: 'Arial Unicode MS';
      margin: 0;
      padding: 0;
      background-repeat: repeat-x;
      background-color: white;
      direction: rtl;
      font-size: 10.3pt;
  }
  
  h1, h2, h3, h4, h5, h6 {
      margin: 0;
  }
  
  
  h1 {
      font-size: 17pt;
      text-decoration: underline;
      top: 3px;
      padding-bottom: 10px;
      line-height: 25px;
  }
  
  h2 {
      font-family: david;
      font-size: 11pt;
      color: #191970;
  }
  
  h3 {
      font-size: 16pt;
      color: white;
      margin-left: 15px;
      font-weight: bold;
      margin-bottom: 20px;
      padding-right: 30px;
      padding-top: -55px;
      font-family: 'Arial Unicode MS';
  }
  
  
  
  /*page -----------*/
  #page {
      width: 900px;
      padding: 0px;
      margin: 0 auto;
      direction: rtl;
      position: relative;
      z-index: 100;
      z-index: 5;
      background-image: url("images/bgimage.png");
  }
  
  #leftshadow {
      width: 100px;
      height: 900px;
      background-image: url("images/leftshadow.png");
      position: absolute;
      right: 840px;
      z-index: none;
      top: -25px;
  }
  
  #rightshadow {
      width: 100px;
      height: 900px;
      background-image: url("images/rightshadow.png");
      position: absolute;
      right: -45px;
      z-index: none;
      top: -25px;
  }
  </code></pre>
  
  <p>My question is how can I move the image-shdow back, behind the main content?</p>
  
  <p>I tried a lot with z-index but I couldn't find a solution, can you help me solve thos problem pleas?</p>