title: Fixed div background overlapping browser scrollbars
body: <p>Very strange behavior that I haven't seen before.</p>
  
  <p>I have a fixed position div that has a transparent png background image.  The z-index is set to -1 so that content can scroll over the fixed image with the scrollbars.</p>
  
  <p>I have it positioned with the bottom and right at 0px, but the image overlaps the scrollbars (on FF and Safari, anyway.)</p>
  
  <p>Here's the link:</p>
  
  <p><a href="http://adamjcas.www59.a2hosting.com/pg/show/id/4" rel="noreferrer">http://adamjcas.www59.a2hosting.com/pg/show/id/4</a></p>
  
  <p>CSS:</p>
  
  <pre><code>#plants /*for the cut paper plants in the background*/
  {
      background: transparent url(../background_images/plants.png) no-repeat;                                         
      bottom:0px;
      right:0px;
      z-index: -1;
      position:fixed;
      height:691px;
      width:475px;        
  }   
  </code></pre>
  
  <p>One hack I used was to use 
      right: 16px;</p>
  
  <p>Which worked fine, as there is always (probably) a right scrollbar.  But the bottom scroll is only sometimes there.  Is this a simple CSS issue?</p>