游戏主界面背景无法铺满全屏的技术求助

请问有人知道我的游戏主界面背景为何显示成这样吗？我希望将背景设置为铺满整个屏幕，因为我计划为游戏菜单和游戏主界面这两个不同页面设置不同背景。若您有解决思路或优化建议，欢迎告知。

我的代码： #

CSS

*,::before,::after {box-sizing: border-box;margin: 0;padding: 0;}
body {font-family: 'Skranji', sans-serif;}
/* Roots */
:root {--background-main-game: url('../images/wowWP.jpg');--background-main-menu: url('../images/gameMenu.jpg');}
main {height: 100vh;}
/* Game backgound */
.mainGameBackground {background-image: var(--background-main-game);background-repeat: no-repeat;background-position: center;background-size: cover;position: relative;height: 100vh;width: 100vh;}

HTML

<section class="mainGameBackground">
    <!-- Game board -->
    <div class="gameBoard">
        <div class="mainBoard mt-0 mb-5 text-center mx-auto" id="mainGameBoard">
            <span id="warriorTurn"></span>
            <div class="square square1" style="border-left: 0; border-top: 0; margin-left: 15px;" id="0"></div>
            <div class="square square2" style="border-top: 0" id="1"></div>
            <div class="square square3" style="border-top: 0; border-right: 0;" id="2"></div>
            <div class="square square4" style="border-left: 0; margin-left: 15px;" id="3"></div>
            <div class="square square5" id="4"></div>
            <div class="square square6" style="border-right: 0;" id="5"></div>
            <div class="square square7" style="border-left: 0; border-bottom: 0; margin-left: 15px;" id="6"></div>
            <div class="square square8" style="border-bottom: 0;" id="7"></div>
            <div class="square square9" style="border-right: 0; border-bottom: 0;" id="8"></div>
        </div>
        <div class="d-md-flex">
            <button class="btn d-block mb-4 m-md-1" id="playAgain">Play Again</button>
            <button class="btn d-block ml-md-4 m-md-1" id="menuButton">Menu</button>
        </div>
    </div>
</section>

核心问题修复 #

背景无法铺满屏幕的根源是.mainGameBackground的宽度设置为100vh——vh是视口高度单位，会让元素宽度等于屏幕高度而非宽度。将宽度改为以下两种方式之一即可：

• 用100vw（视口宽度单位，匹配屏幕宽度）
• 或用width: 100%，利用块级元素默认特性铺满父容器

修改后的CSS片段：

.mainGameBackground {
    background-image: var(--background-main-game);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    height: 100vh;
    width: 100vw; /* 替换100vh为100vw */
    /* 也可替换为 width: 100%; */
}

额外优化建议 #

• 避免横向滚动条：如果用100vw，页面出现垂直滚动条时可能触发横向滚动。可以给body添加overflow-x: hidden，或者直接用width: 100%更稳妥：

  body {
      font-family: 'Skranji', sans-serif;
      overflow-x: hidden;
  }
  

• 简化层级高度：main标签设置了height:100vh，但背景是放在section上，可考虑移除main的高度设置，避免不必要的层级冲突。
• 背景适配选择：当前用background-size: cover能让背景铺满且裁剪适配，若需要完整显示背景图，可改为contain，但会出现留白，按需选择即可。
• 多页面背景管理：你用CSS变量区分菜单和主界面背景的方式很合理，后续只需给对应页面的容器添加对应类名，就能切换背景，保持这个模式即可。

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