css - 背景不走封面大小bootstrap 4

Question

所以我正在制作一个基本网站。当我在桌面上打开它时一切正常，但是当我在我的 iPhone 上打开它时，主体的背景图像不会“覆盖”容器。

我在这里做错了什么？ (我添加了背景附件:阅读 stackoverflow 上的解决方案后在移动设备上滚动，但没有用)。

这是正在发生的事情的图像:

这是它在桌面上的样子:

这是它在移动设备上的样子。

这是我的CSS:

@font-face {
    font-family: rubikCustom;
    src: url(Rubik-Regular.ttf);
 }

html, body {
    height: 100%;
    width: 100%;
    min-height: 100%;
}

.navbar {
    background-color: #FFF;
}

.navbar-nav > li{
    margin-left: 15px;
    margin-right: 15px;
}

#home {
    background: url(home_back_blur.png) no-repeat center center fixed;
    display: table;
    height: 100%;
    min-height: 100%;
    position: relative;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* background-attachment:scroll */

@media only screen and (max-width: 480px) {
    #home {
        background-attachment:scroll;
    }
  }

#full-height-cont {
    height: 100%;
    width: 100%;
}

.landing-text {
    display: table-cell;
    text-align:  center;
    vertical-align: middle;
    color: white;
    font-family: rubikCustom;
}

Answer 1

background-size: cover 表示背景总是会增长到“覆盖”整个 div。

在桌面上，您的 div 是横向的(宽度长于高度)。在手机上，恰好是纵向(宽度小于高度)。您可以通过将 border: 1px solid red 添加到 #home 来验证这一点。

有两种可能的解决方案:在移动尺寸下改变元素的高度，或者改变background-size属性