如何为网页设置顶部、中部、底部背景图并解决适配问题？

我来帮你搞定这两个问题，同时完美实现顶部、中部、底部三张背景图的布局需求。先看调整后的完整代码，再给你拆解每个修改的原因：

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style type="text/css">
        /* 重置默认样式，消除body自带的边距 */
        body {
            margin: 0;
            padding: 0;
            background-image: url("TBG_02.jpg");
            background-color: #cccccc;
            background-size: cover;
            background-repeat: no-repeat;
            /* 让body占满视口高度，确保中部背景能覆盖整个可视区域 */
            min-height: 100vh;
        }

        /* 顶部背景容器 */
        #top {
            width: 100%;
            height: 200px;
            background-image: url("BG_02.png");
            background-repeat: no-repeat;
            /* 关键：让背景图缩放适配容器，居中显示 */
            background-size: cover;
            background-position: center center;
        }

        /* 底部背景容器 */
        #bottom {
            width: 100%;
            height: 200px;
            background-image: url("BG_03.png");
            background-repeat: no-repeat;
            /* 关键：缩放适配+居中 */
            background-size: cover;
            background-position: center center;
            /* 固定在页面底部，左右贴紧 */
            position: fixed;
            left: 0;
            bottom: 0;
            /* 避免被其他内容遮挡 */
            z-index: 1;
        }

        /* 中部内容区（可选，用来避免内容被顶部/底部遮挡） */
        .content {
            padding: 220px 20px;
        }
    </style>
</head>
<body>
    <div id="top"></div>
    <div class="content">
        <!-- 这里放你的页面内容 -->
        中部页面内容
    </div>
    <div id="bottom"></div>
</body>
</html>

问题修复说明 #

1. 顶部/底部背景图适配窗口缩放问题 #

原代码中顶部和底部的背景图只设置了background-repeat: no-repeat，没有配置缩放规则，所以窗口缩小时无法适配。我添加了两个关键属性：

• background-size: cover：让背景图等比例缩放，完全覆盖容器区域，不会出现空白
• background-position: center center：确保背景图缩放时始终居中显示，避免重要内容被裁切

2. 底部背景图未贴紧页面底部问题 #

原代码存在两个导致偏移的问题：

• body默认带有margin: 8px，会让页面底部出现间隙，所以我添加了body { margin: 0; padding: 0; }重置默认样式
• 原代码同时给#bottom和.bottomm设置了position: fixed，样式冲突，我合并了样式，只给#bottom设置left: 0; bottom: 0;，确保左右和底部完全贴紧视口

额外优化点 #

• 给body添加min-height: 100vh，确保中部背景能覆盖整个浏览器可视高度
• 新增了.content类，给内容区添加上下内边距，避免页面内容被顶部/底部的固定高度容器遮挡
• 给底部容器添加z-index: 1，防止被页面其他内容覆盖

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