Repeating Background Image Full Length of Page

Question

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.

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.

<main>
    <!-- Repeating 729 -->
    <div class="repeat729">
        <div class="callout">
            <img src="img/callout.png">
        </div>
    </div>

    <!-- Intro Section -->
    <header id="slide1" class="homeSlide">
        <div class="bcg intro" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#slide1" >
            <div class="hsContainer">
                <a href="#slide2" class="btn btn-circle page-scroll scroll"><span>Scroll</span>
                    <i class="fa fa-angle-double-down animated"></i>
                </a>
            </div>
        </div>
    </header>
    <!-- Second Section -->
    <section class="slide 2">
        lorem ipsum - multiple sections on page
    </section>
</main>

The CSS is:

.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;
}

body and html are both set to min-height: 100%; height: auto;

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.

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?

Thanks in advance!

Fiddle is here: https://jsfiddle.net/6y3db22n/

Answer 1

CSS

CSS - Expand float child DIV height to parent's height

JS

Else use jquery and get the height of the parent and set that height to the background repeater element. This should be done in window resize function. You might have to call it after the content have been loaded to make it render properly, if content especially has images.