移动端背景图片响应式适配问题：图片上下留白或无法响应

你的代码里background-attachment: fixed在移动端浏览器存在兼容性问题，再加上如果html/body没有设置足够高度，就会出现你说的“留白”或“无法响应式”的情况。下面给你两个可行的解决办法：

办法一：移除固定背景，保证容器占满视口 #

这个方案适合不需要背景固定的场景，简单直接：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    body {
        background-image: url('hand.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        /* 移除fixed，避免移动端兼容性问题 */
        background-attachment: scroll;
    }
</style>

• 给html和body设置height:100%，确保它们占满整个视口高度，不会因为容器高度不够出现留白
• 去掉background-attachment: fixed，避免移动端浏览器对fixed属性的渲染bug

办法二：用伪元素实现固定背景（兼容移动端） #

如果需要背景固定的效果，用伪元素替代body的fixed属性，能解决移动端的兼容性问题：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('hand.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: -1;
    }
</style>

• 用body的伪元素创建一个铺满视口的固定层，作为背景载体
• z-index: -1确保这个背景层在页面内容下方，不会遮挡内容
• 给html/body设置overflow-x: hidden，避免横向滚动条出现

内容的提问来源于stack exchange，提问作者Sahil Sawant