重复背景图像全长页面

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 并获取父元素的高度并将该高度设置为背景转发器元素。 这应该在窗口调整大小功能中完成。 如果内容特别有图像，您可能必须在内容加载后调用它以使其正确呈现。