title: Background of div gets cut off at viewport
body: <p>I know that this is SIMILAR to a few questions already out there, but it's different in that it's not my main body background that's causing the problem, and so I'm lost.</p>
  
  <p>The website is at <a href="http://www.thesweet-spot.com/test77" rel="nofollow">http://www.thesweet-spot.com/test77</a></p>
  
  <p>The problem is that when you shrink your viewport to be smaller than the content and then scroll down, the wavy line on the left stops at where the bottom of your viewport originally was. The tricky part is that I want the wavy line on the left to scroll WITH the content when the content is too long.</p>
  
  <p>The relevant CSS looks like this: </p>
  
  <pre><code>body {
  background: url('images/background.jpg');
  margin: 0;
  padding: 0;
  min-width: 1000px;
  }
  
  #container {
  width: 100%;
  position: absolute;
  top: 105px;
  bottom: 0;
  margin: 0;
  padding: 0;
  }
  
  #sidebarbg {
  background: url('images/chocolate.jpg');
  width: 300px;
  height: 100%;
  position: fixed;
  left: 0;
  z-index: 11;
  background-attachment:fixed;
  }
  
  #sidebar {
  background: url('images/sidebar.png');
  width: 300px;
  height: 100%;
  position: absolute;
  left: 0;
  z-index: 12;
  }
  
  #contentnest {
  position: absolute;
  top: 50px;
  left: 365px;
  right: 0;
  z-index: 14;
  }
  
  #content {
  background: url('images/contentbg.png');
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  -khtml-border-radius: 30px;
  padding: 20px;
  border: #f062a4 3px solid;
  width: 80%;
  min-width: 350px;
  margin-left: auto;
  margin-right: auto;
  font-size: 22px;
  line-height: 150%;
  font-family: QuicksandBook, Tahoma, Arial, sans-serif;
  color: #905131;
  }
  </code></pre>
  
  <p>and the HTML looks like this:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="sidebarbg"&gt;&lt;/div&gt;
  &lt;div id="sidebar"&gt;&lt;/div&gt;
  &lt;div id="container"&gt;
  &lt;div id="contentnest"&gt;
  &lt;div id="content"&gt;
  &lt;! -- content goes here --&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>What am I missing?</p>