背景-容器元素上的图像不能显示容器的所有部分

Question

我是CSS的新手，每天都在学习。我被困在理解一些可能微不足道的事情上，但我不确定用谷歌搜索这个问题的正确术语。所以，我有一个带有"background“类的容器<main>，里面有三个部分，后面跟着"package”类和页脚。容器内的部分足够高，需要读者向下滚动才能查看所有部分

</header>
    <main class="background">
        <section class="package" id="plus">
            <a href="#">
                <h1 class="package__title">Our PLUS Plan</h1>
                <h2 class="package__subtitle">The most popular choice of our customers.</h2>
                <p class="package__info">Benefit from increased storage and faster support to ensure that your mission-critical data and applications
                    are always available!</p>
            </a>
        </section>
        <section class="package" id="free">
            <a href="#">
                <h1 class="package__title">Our FREE Plan</h1>
                <h2 class="package__subtitle">An extremely solid start into our hosting world.</h2>
                <p class="package__info">Get started immediately at zero cost!</p>
            </a>
        </section>
        <div class="clearfix"></div>
        <section class="package" id="premium">
            <a href="#">
                <h1 class="package__title">Our PREMIUM Plan</h1>
                <h2 class="package__subtitle">All your enterprise needs. Instant support, guaranteed uptime. </h2>
                <p class="package__info">The best solution for small to large enterprises. Because hosting shouldn't be in the way!</p>
            </a>
        </section>
    </main>
    <footer class="main-footer"> .... 

看起来是这样的：

​

​

我想要一个背景图像来覆盖整个页面，以便它位于所有部分的后面，直到页脚开始。我想，我可以针对<main class= "background">并尝试：

<style>
        .background {
                background-image: url("../images/plans-background.jpg") ;
                
        }

但这不会在页面中显示最后一个部分(即使<main>包含三个部分)，滚动条也会消失。

​

​

有人能解释一下这种行为背后的原因吗？我假设这是因为图像的继承高度，所以为了测试它，我创建了一个非常高的图像(在photoshop中有5000像素)，并尝试使用该图像作为背景，但同样的问题仍然存在。

Answer 1

你可以试试这个。背景图像保持固定位置。

 .background { 
  background: url("../images/plans-background.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}