title: CSS background-image bottom of div
body: <p>Here's what I have:</p>
  
  <pre><code>&lt;div id="page_container"&gt;
      A short text
  &lt;/div&gt;
  
  #page_container
  {
      position: absolute;
      top: 120px;
      left: 280px;
      right: 30px;
      background-color: #D0D0CD;
      border-radius: 5px;
      box-shadow: 1px 1px 12px #555;
      height: 1060px;
      overflow: auto;
      background-image: url(./library/grappe.png);
      background-repeat: no-repeat;
      background-position: bottom right;
  }
  </code></pre>
  
  <p>So, my div is 1060px, on the right of my screen, and has an image on the right bottom corner. So far so right. Nice looking with a short text.</p>
  
  <p>Due to the overflow: auto, a long text won't make my div higher, but add a scrollbar to it, that's what I want.</p>
  
  <p>However, the background-image stays glued to the div right bottom corner, instead of basically not showing and first show when I scroll down the div that has a scrollbar. Basically the image stays on the same position, like a <code>position: fixed</code>. Can't get to change that behavior.</p>