html - 缩小手机背景

Question

我有一个分辨率为 1900x1200 的背景图片，背景在大多数分辨率下都显示得很好，但是当我降低到移动分辨率时，我遇到了问题。背景被拉长了，非常丑陋。在我的手机中网站版本有很多高度(在android s4上我有将近3000px的高度)，现在我的问题是如何让我的背景在手机上看起来更好？

这是我当前的背景 css 代码。我知道我必须在媒体查询中添加一些新代码，只是为了特定的手机分辨率，但我不知道是什么...任何帮助或解释？

body {
background: url(mypicture.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 1

在定义屏幕尺寸限制的新媒体查询下使用相同的正文声明，并且最好拉取新图像 - mypicture-mobile.jpg 已调整大小，同时牢记移动显示。 尝试

@media only screen and (max-width : 480px) { /*change 480 to targeted device width */
body {
    background: url(mypicture-mobile.jpg) no-repeat center center fixed;
    -webkit-background-size: 100% 100%; /* set to 100% instead of cover to fit screen */
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    }
}

稍微尝试一下就会发现您的解决方案，试一试

希望这对您有所帮助。