title: Repeating Background Image Full Length of Page
body: <p>I am creating a scrolling parallax site and I want an image to repeat down the right side of the screen, extending the full-width of the site. The length of the page will vary based on screen size.     </p>
  
  <p>I have all of the page sections (not including nav) within a  tag. Before any of the sections I have the div with the full length repeating background image (.repeat729). Within that div I have a callout that is flush with the 729 background image. </p>
  
  <pre><code>&lt;main&gt;
      &lt;!-- Repeating 729 --&gt;
      &lt;div class="repeat729"&gt;
          &lt;div class="callout"&gt;
              &lt;img src="img/callout.png"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Intro Section --&gt;
      &lt;header id="slide1" class="homeSlide"&gt;
          &lt;div class="bcg intro" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#slide1" &gt;
              &lt;div class="hsContainer"&gt;
                  &lt;a href="#slide2" class="btn btn-circle page-scroll scroll"&gt;&lt;span&gt;Scroll&lt;/span&gt;
                      &lt;i class="fa fa-angle-double-down animated"&gt;&lt;/i&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
      &lt;!-- Second Section --&gt;
      &lt;section class="slide 2"&gt;
          lorem ipsum - multiple sections on page
      &lt;/section&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>The CSS is:</p>
  
  <pre><code>.repeat729 {
      width: 26%;
      position: absolute;
      right: 0;
      z-index: 1000;
      background-image: url('../img/729-rightside.png');
      background-repeat: repeat-y;
      height: 600%;
      background-size: contain;
      top: 58px;
  }
  </code></pre>
  
  <p>body and html are both set to min-height: 100%; height: auto;</p>
  
  <p>I need to set a height in order for the image to be shown at all, and the height needs to be greater than 300% in order for the image to be flush with the right side of the page and in order for the image to extend the full length of the page I need to adjust the height to be exact.</p>
  
  <p>Is there a better way to accomplish this using CSS (I would imagine) or is the best option here to determine the length of the page using jquery and dynamically add that value to the height of the .repeat729 div? If jQuery is the best solution, what is the best way to accomplish this? </p>
  
  <p>Thanks in advance! </p>
  
  <p>Fiddle is here: <a href="https://jsfiddle.net/6y3db22n/" rel="nofollow">https://jsfiddle.net/6y3db22n/</a></p>