重復背景圖像全長頁面

Question

我正在創建一個滾動視差站點，並且我想要一個圖像在屏幕右側重復，從而擴展站點的整個寬度。 頁面的長度將根據屏幕大小而有所不同。

我有一個標簽內的所有頁面部分（不包括導航）。 在任何部分之前，我都有帶有全長重復背景圖像 (.repeat729) 的 div。 在那個 div 中，我有一個與 729 背景圖像齊平的標注。

<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>

CSS是：

.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 和 html 都設置為 min-height: 100%; 高度：自動；

我需要設置一個高度才能完全顯示圖像，並且高度需要大於 300% 才能使圖像與頁面右側齊平並為了使圖像延伸頁面的全長我需要調整高度以使其准確。

有沒有更好的方法來使用 CSS（我可以想象）來實現這一點，或者是使用 jquery 確定頁面長度並將該值動態添加到 .repeat729 div 的高度的最佳選擇？ 如果 jQuery 是最好的解決方案，那么實現這一目標的最佳方法是什么？

提前致謝！

小提琴在這里： https : //jsfiddle.net/6y3db22n/

Answer 1

CSS

CSS - 將浮動子 DIV 高度擴展到父級高度

JS

否則使用 jquery 並獲取父元素的高度並將該高度設置為背景轉發器元素。 這應該在窗口調整大小功能中完成。 如果內容特別有圖像，您可能必須在內容加載后調用它以使其正確呈現。