title: CSS background repeat problem
body: <p>I've got a background image that I want to extend the length of my page along the left margin.</p>
  
  <p>Here is my css...</p>
  
  <pre><code>body, html{
      height:100%;
  }
  #content{
      background:url(../images/leftBorder.png);
      background-repeat:repeat-y;
      height:100%;   
  }
  </code></pre>
  
  <p>that has a great result:</p>
  
  <p><img src="https://i.stack.imgur.com/kAUZq.jpg" alt="good result"></p>
  
  <p>Until the content in my page reaches past the page fold line, at this point if I scroll down I get this:</p>
  
  <p><img src="https://i.stack.imgur.com/kuRQr.jpg" alt="bad result"></p>
  
  <p>All the content is inside a div with the id of "content".  </p>
  
  <p>Thoughts?</p>