jquery - 重复页面的背景图像全长

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 是最好的解决方案，那么实现它的最佳方法是什么？

提前致谢!

fiddle 在这里:https://jsfiddle.net/6y3db22n/

Answer 1

CSS

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

JS

否则使用 jquery 并获取父级的高度并将该高度设置为背景转发器元素。这应该在窗口调整大小功能中完成。如果内容特别包含图像，您可能必须在加载内容后调用它以使其正确呈现。