Question

我正在创建一个滚动的视差网站，我想要一个图像在屏幕的右侧重复，扩展网站的全宽。页面长度将根据屏幕大小而有所不同。

我在标签中包含所有页面部分（不包括nav）。在任何部分之前，我有div与全长重复背景图像（.repeat729）。在该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 - Expand float child DIV height to parent's height

JS

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

重复背景图像全长页面

1 个答案: