css - chrome mobile 上不显示背景图片

Question

我正在编写网页代码并学习 flexbox。我得到了一个不错的设计，一切都在桌面上完美运行(当窗口调整大小时，一切都很完美)。这些元素在手机和平​​板电脑上也可以很好地调整大小。

我遇到的唯一问题是，主要的 Big Div 有一个背景图像，可以在任何地方完美调整大小，除了 chrome for mobile(android) 和 safari，它甚至不显示在纵向模式下，并且在景观。它在 firefox 应用程序上按预期工作(android)。

这是网址:http://liferockets.com/bluemonk/

这是所有代码的 Github 分支:https://github.com/soulhima/bluemonk/tree/main-edits

下面是专门处理页面那部分的代码:HTML

    <div class="start-box-1">
        <p class="start-text">I Want A : 
            <select>
                <option value="choice1">Choice 1</option>
                <option value="choice2">Choice 2</option>
            </select>
            <span class="start-button">Website</span>
        </p>
    </div>


    <div class="start-box-2">
        <p class="start-text">I Want A 
        <span class="start-button">Design</span></p>
    </div>
</div>

CSS

background-image: url(../images/start-box.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;

感谢您的帮助。

Answer 1

xxx {
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 height:100%;
 min-height:100%;
}