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

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);
   }

它适用于台式机和平板电脑设备。然而，在手机上，并不是所有的东西都能显示出来。我有一个用于移动设备的特定图像，但我不想使用它，因为有太多的像素质量损失。我想使用相同的图像，但它不能正确缩放。

我已经尝试添加了一个移动媒体查询，添加了background-size: contain。然后图像在窗口中缩小，但并不是覆盖了整个背景。所以这也无济于事。

我能做些什么来解决这个问题呢？

谢谢。

Answer 1

这是在肖像屏幕上使用风景图像时的正常行为。你唯一能做的就是，做你已经尝试过的事情。添加一些针对不同屏幕分辨率的媒体查询，以使您的图像按照您认为的最佳方式进行调整。

对于你的情况有一个想法:如果你给你的网站添加了页眉和页脚，它应该可以完全按照你的愿望显示背景图像。

Answer 2

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

背景-大小: 100% 100%；