背景图像在移动设备上没有完全响应

Question

下午好， 我是网页设计的新手。 我在我的网页中添加了背景图片。 我使用以下 CSS 来实现这一点：

body {
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    height: 100%;
    background-image: url(link.jpg);
   }

在台式机和平板设备上都可以。然而，在手机上，并非一切都显示出来。 我有一个针对移动设备的特定图像，但我不想使用它，因为像素质量损失太多。 我想使用相同的图像，但它没有正确缩小。

我已经尝试为移动设备添加媒体查询，并添加背景大小：包含。然后图像在宽度上缩小，但没有覆盖整个背景。所以这也无济于事。

我该怎么做才能解决这个问题？

谢谢。

Answer 1

这是在纵向屏幕上使用横向图像时的正常行为。你唯一能做的就是，你已经尝试过的。为不同的屏幕分辨率添加一些媒体查询，从而调整您的图像，使其看起来最佳。

针对您的案例的一个想法： 如果您向网站添加页眉和页脚，则应该可以完全按照您的意愿显示背景图片。

Answer 2

如果您可以拉伸图像，则可以使用，

背景尺寸：100% 100%;