html - Bootstrap : Background is covering div container, 不仅仅是屏幕

Question

在我的网站上，我希望背景完全不动，而内容通常在背景上滚动到前景。这种效果在我的 macbook 上完美运行。我已经用 Safari、Chrome 和 Firefox 测试过它。现在，当我在 iPhone 上打开网站时，背景图像覆盖了整个 div 容器，而不仅仅是屏幕，这意味着图像太大而且不再清晰。

HTML:

<div id="tf-home" class="text-center">
    <div class="overlay">
        <div class="content">
            <h1>EURE <strong><span class="color">FLUCHT</span></strong> beginnt an diesem Ort</h1>
            <a href="#tf-about" class="fa fa-angle-down page-scroll"></a>
        </div>
    </div>
</div>

CSS:

#tf-home {
  background: url(../img/header.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100%
  color: #cfcfcf;
}

我希望有人能帮助我。

提前谢谢你:)

Answer 1

这里你有一个 jsfiddle

#tf-home {
  background: url(https://www.google.com/work/images/logo/google-for-work-social-icon.png);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  color: #cfcfcf;
}