背景仅覆盖移动设备上的一半页面

Question

当我通过PC浏览器打开它时，一切都很好

我将高度更改为350％，可以正常工作，覆盖了整个屏幕，但是图像变得如此伸展。我已将background-size更改为包含，它不起作用。

{background-image: url(bg.jpg) ;

background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: 100% 100%

它看起来像什么 图片在这里结束

当我切换到桌面模式时，它看起来甚至更糟

图片在这里结束

Answer 1

尝试将最小高度添加到100vh。也许有帮助

将此CSS代码添加到您的div

最低高度：100vh；

Answer 2

这里最好的选择是使用媒体查询来获取手机尺寸，或者使用另一幅图片为手机设置长宽比，或者更改背景位置和尺寸以适合手机。下面的代码可帮助您入门。

/*--For Desktop--*/

body{
    background-image: url(bg.jpg) ;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%
}

@media only screen and (max-width: 600px)  {
    body{
        background-image: url(theotherimage-withnewaspectratio.jpg);
    }
}

此外-最大宽度将根据您的图像在桌面上开始显得晦涩而不是600像素而改变（只需在开发人员模式下缩小屏幕即可知道像素宽度）

Answer 3

将背景尺寸更改为覆盖范围，而不是100％100％，我认为这将为您提供一些帮助