如何为HTML游戏设置全屏居中底层背景图（HTML/CSS/JavaScript）

1. 修复HTML结构错误 #

你的HTML存在多余的闭合标签、拼写错误和未闭合标签问题，这些会导致布局异常。修正后的完整HTML如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Jump</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <img src="bg.jpg" id="bg">
    <div id="ground"></div>
    <div id="character"></div>
    <div class="obstacles"></div>
    <h2>Score: <span id="score">0</span></h2>
    <script src="script.js"></script>
</body>
</html>

修正点：

• 移除了多余的</body>和</html>标签，将游戏元素统一放在<body>内部
• 修正intial-scale为正确拼写initial-scale
• 闭合了<h2>标签内的<span>元素

2. 添加背景图专属CSS样式 #

在CSS文件中为#bg添加样式，实现全屏覆盖、居中显示，并将其置于所有游戏元素底层：

*{
    margin: 0;
    padding: 0;
}
body{
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
#bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，裁剪超出部分以覆盖容器 */
    z-index: -1; /* 将背景图层级设为最低，确保游戏元素显示在上方 */
}
#ground{
    width: 100%;
    height: 100px;
    background-color: purple;
    position: absolute;
    bottom: 0;
}
#character{
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    bottom: 100px;
    right: calc(100% - 100px);
}
.obstacle{
    width: 30px;
    height: 100px;
    background-color: black;
    position: absolute;
    bottom: 100px;
    right: 0;
}
h2{
    font-family: sans-serif;
    margin-top: 10px;
    margin-left: 10px;
}

修正点：

• 补充了h2样式末尾缺失的分号
• 新增#bg的全屏定位、比例适配和层级控制样式

关键属性说明 #

• position: absolute：让背景图脱离文档流，以设置了position: relative的<body>为定位基准
• top: 0; left: 0; width: 100%; height: 100%：强制背景图铺满整个可视区域
• object-fit: cover：避免图片拉伸变形，保持原有比例的同时覆盖容器，超出部分自动裁剪
• z-index: -1：将背景图置于所有默认层级（z-index:0）的游戏元素下方，确保角色、地面等正常显示

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