所以我最近将我的background-size改为100％100％，封面;
但它在移动设备上看起来不太好。基本上宽度是正确的，但高度只是搞砸了，在向下滚动后分割整个屏幕。我觉得我错过了什么。
示例：https://imgur.com/a/y56b6Pb0
width: 100%;
height: 100%;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
background-color: black;
margin: 0;
padding: 0;
background-color: #242424;
background-image: url(/assets/img/bg1.jpg);
background-size: 100% 100%, cover, cover !important;
background-repeat: no-repeat;
background-attachment: fixed;
overflow-x: hidden;
HTML
<body id="page-top" style="background-size: cover; background-repeat: no-repeat;">
<div id="page-loader" class="showme">
<div>
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
</div>
</div>
<div id="cookies-information" class="alert alert-info alert-dismissable">
<a href="#" id="cookie-info-close" class="close" data-dismiss="alert" aria-label="close">×</a>
<p>This site uses cookies — small text files that are placed on your machine to help the site provide a better user
experience. <a href="https://www.whatarecookies.com" target="_blank">Read more</a></p>
</div>
<div id="image-modal">
<img src="https://placehold.it/600x400">
<button class="btn btn-default">Close</button>
</div>
<div id="main-menu">
<div class="menu-logo">
<a href="/">
<img src="assets/img/logo.png" style="width:90px;height:auto;">
</a>
</div>
由于我没有原始背景图片，因此我使用在线图片。希望这是你想要实现的目标。
html {
height: 100%;
}
body {
/* The image used */
background-image: url("https://www.w3schools.com/howto/img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}<body>
<div id="page-loader" class="showme">
<div>
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
</div>
</div>
<div id="cookies-information" class="alert alert-info alert-dismissable">
<a href="#" id="cookie-info-close" class="close" data-dismiss="alert" aria-label="close">×</a>
<p>This site uses cookies — small text files that are placed on your machine to help the site provide a better user experience. <a href="https://www.whatarecookies.com" target="_blank">Read more</a></p>
</div>
<div id="image-modal">
<img src="https://placehold.it/600x400">
<button class="btn btn-default">Close</button>
</div>
<div id="main-menu">
<div class="menu-logo">
<a href="/">
<img src="assets/img/logo.png" style="width:90px;height:auto;">
</a>
</div>