时间戳

首页 > 解决方案 > 背景图像在移动设备上没有完全响应

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

问题描述

下午好，我是网页设计新手。我在我的网页中添加了背景图片。我使用下面的 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);
   }

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

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

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

谢谢你。

标签： csselementor

解决方案

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

适合您的情况的一个想法：如果您向网站添加页眉和页脚，则应该可以完全按照您的意愿显示背景图像。

推荐阅读