title: Trying to create a fixed vignette over a webpage
body: <p>I want to overlay a vignette over a webpage.  The vignette will be fixed to the visible part of the page (i.e. the window) and the page will scroll up and down underneath it.  I figure there must be a better way to do it than the way I am trying (which isn't working).</p>
  
  <p>What I have tried is to have the 4 corners of the vignette as 4 separate images, that are positioned as "fixed" and have an increased z-index.  That works fine.  But I want to fill in the gaps between the corner images.  I have created a couple of thin slices of the appropriate area of the vignette that I was hoping to repeat between the corners.  But I can't seem to arrange my divs in a way that allows me to fill in the gaps.  At the moment I have 4 corner parts of the vignette, with nothing in between the corners.</p>
  
  <p>Here's a part of the code where I try and organise the divs.  The "left" and "right" class of divs are floated respectively:</p>
  
  <pre><code>&lt;body onload="sizeDivs()" onresize="sizeDivs()"&gt;
      &lt;div class="left"&gt;
          &lt;div class="vignette"&gt;&lt;img id="vignette_topleft" src="code/images/vignette_topleft.png"/&gt;&lt;/div&gt;
          &lt;div class="vignette_side" id="vignette_left"&gt;&lt;/div&gt;
          &lt;div class="vignette"&gt;&lt;img id="vignette_bottomleft" src="code/images/vignette_bottomleft.png"/&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="vignette_top-bottom" id="vignette_top"&gt;&lt;/div&gt;
      &lt;div class="right"&gt;
          &lt;div class="vignette"&gt;&lt;img id="vignette_topright" src="code/images/vignette_topright.png"/&gt;&lt;/div&gt;
          &lt;div class="vignette_side" id="vignette_right"&gt;&lt;/div&gt;
          &lt;div class="vignette"&gt;&lt;img id="vignette_bottomright" src="code/images/vignette_bottomright.png"/&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The  events are javascript functions which determine the size of fill-in divs required and then sets their heights.</p>
  
  <p>The CSS for top, left and right fill is:</p>
  
  <pre><code>.vignette {
          z-index: 5;
      }
  
      .vignette_top-bottom {
          background-repeat: repeat-x;
          z-index: 5;
          margin: 0 auto;
      }
  
      #vignette_topleft {
          position: fixed;
          top: 0;
          left: 0;
      }
  
      #vignette_bottomleft {
          position: fixed;
          bottom: 0;
          left: 0;
      }
  
      #vignette_topright {
          position: fixed;
          top: 0;
          right: 0;
      }
  
      #vignette_bottomright {
          position: fixed;
          bottom: 0;
          right: 0;
      }
  
      #vignette_left {
          background-image: url("code/images/vignette_left.png");
          background-repeat: repeat-y;
          position: relative;
          left: 0px;
          top: 0px;
          z-index: 10;
      }
  
      #vignette_right {
          background-image: url("code/images/vignette_rightred.png");
          background-repeat: repeat-y;
          position: relative;
          right: 0px;
          top: 0px;
          z-index: 10;
      }
  
      #vignette_top {
          background-image: url("code/images/vignette_top.png");
          position: relative;
      }
  </code></pre>
  
  <p>You'll see various combinations of positioning in there, but it doesn't seem to make much of a difference how I position the fill bits.</p>
  
  <p>Any ideas on how I can make this work?</p>