如何在CSS中实现背景图片居中？仅页面50%缩放时生效

页面背景图片无法居中，仅当页面缩放至50%时才会正常居中。其他页面使用相同CSS设置可正常生效，但此页面不行，修改background-size属性无效果。

当前HTML代码 #

<head>
    <title>
        Why are you here?
    </title>
    <link rel="stylesheet" href="Akari.css">
</head>

<html>
    <body>
        <div>
            <h1>
                <span class="colorYellow">Akari </span><span class="colorGreen">- Playstation</span><span class="colorAqua"> 3 VSH Menu</span>
            </h1>

        </div>
        <div class="body">
            <p>
                This is the page for Akari! Akari is a WIP VSH Menu for <span class="CEX">CEX</span>/<span class="DEX">DEX</span> CFW/<span class="henpt1">PS3</span><span class="henpt2">HEN</span></p> 
               
            <a
                href="https://github.com/JamesIsWack/Akari-Legacy-Edition/releases/download/v1.2.2-1/Akari.sprx">Click
                here to download the latest release (v1.2.2-1)
            </a>
            <p>
                <style>
                    p
                        {
                            color:rgb(194, 194, 194);
                    }
                </style>
                To install it, put the Akari.sprx into dev_hdd0/plugins, then add /dev_hdd0/plugins/Akari.sprx to boot_plugins.txt (COBRA), or mamba_plugins.txt (MAMBA)
            </p>
        </div>
        <p class="main">
            Screenshots
        </p>
        <img src="https://raw.githubusercontent.com/JamesIsWack/Akari-Legacy-Edition/main/images/160284617-befda427-14ca-463e-9e0f-4ab0ba59707f.png" width="400"></img>
        <p>Menu layout</p>
        <img src="https://raw.githubusercontent.com/JamesIsWack/Akari-Legacy-Edition/main/images/160284724-191861c3-29e9-4a31-ba99-6e157dc83240.png" width="400"></img>
        <p>Menu Settings</p>
        <img src="https://raw.githubusercontent.com/JamesIsWack/Akari-Legacy-Edition/main/images/160466345-e4620c97-8dec-43ce-8689-09f05189fa98.png" width="400">
        <p>Overlay and Settings</p>
        <u1>Features</u1>
        <li>
            Ability to restart VSH, Hardware
        </li>
        <li>
            Ability to show current FW version, LV2 Kernal mode (CEX/DEX)
        </li>
        <li>
            Can be loaded by COBRA, MAMBA, and PS3HEN
        </li>
        <li>
            Can take screenshots (BMP, PNG coming soon!)
        </li>
        <li>
            Overlay with FPS, CELL/RSX tempature (F/C), FAN speed, RAM usage, and more
        </li>
        <br>
        <p>
            Note: this project has been deprecated. Please wait until Akari v2 releases. Until then, use this.
        </p>
        <br>
        <p> </p>
    </body>


    <div class="navbar">
        <a href="../index.html">
            Back to home
        </a>
    </div>
</html>

当前CSS代码 #

body
        {
            text-align: center;
            margin: 0;
            background-color: rgb(0, 0, 0);
            background-image: url(../images/channels4_banner.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            color: white;
           
        }
        a:link
        {
            color: rgb(126, 70, 156);
            text-decoration: none
 
        }
     a:visited
        {
            color: rgb(126, 70, 156);
        }
     a:hover
        {
            color: rgb(255, 255, 255);
        }
     a:active
        {
            color: purple;
        }

    .navbar
        {
            background-color: rgb(52, 51, 51);
            overflow: hidden;
            position: fixed;
            bottom: 0;
            width: 100%;
            border-radius: 10px;
            opacity: 90%;
        }
    .navbar a 
        {
            float: left;
            display: block;
            color: rgb(96, 46, 122);
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }
    .navbar a:hover 
        {
            background-color: grey;
            color: rgb(55, 37, 58);
            transition: background-color 1s,
                color 1s
        }
    .navbar a.active
        {
            color: white;
        }

h1 
            {
              background-color:  rgb(46, 31, 56);
              opacity: 90%;
            }
.colorYellow
            {
                color:yellow;
                opacity: 100%
            }
.colorGreen
            {
                color:greenyellow
            }
.colorAqua
            {
                color:aqua;
            }


main
            {
              color:rgb(195, 195, 195);  
              text-align: middle;
            }
    .CEX
            {
                color:lightskyblue;
            }
    .DEX
            {
                color:darkred
            }
    .henpt1
            {
                color:grey;
            }
    .henpt2
            {
                color:darkgoldenrod;
            }

效果说明 #

• 当前效果：背景图片偏移，未居中显示
• 预期效果：背景图片完整居中覆盖页面

问题出在HTML结构错误以及缺少必要的背景定位和高度设置，按以下步骤修复：

1. 修正HTML结构 #

• <html>标签必须包裹<head>和<body>，原代码中<head>在<html>外，不符合规范
• 将.navbar的div移到<body>内部，避免浏览器渲染异常

修正后的核心结构：

<html>
<head>
    <title>Why are you here?</title>
    <link rel="stylesheet" href="Akari.css">
</head>
<body>
    <!-- 所有页面内容 -->

    <div class="navbar">
        <a href="../index.html">Back to home</a>
    </div>
</body>
</html>

另外，原代码中的<u1>是错误标签，需改为<ul>：

<ul>Features</ul>

2. 完善CSS背景配置 #

在body的CSS规则中添加以下属性，确保背景图片居中且覆盖视口：

body {
    text-align: center;
    margin: 0;
    background-color: rgb(0, 0, 0);
    background-image: url(../images/channels4_banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    /* 新增属性 */
    background-position: center center;
    min-height: 100vh;
    color: white;
}

• background-position: center center：强制背景图片在水平和垂直方向都居中
• min-height: 100vh：确保body至少占满整个视口高度，避免内容过短时背景显示异常

3. 优化代码结构（可选） #

将HTML中的内联样式移到外部CSS文件中，保持代码整洁：

p {
    color: rgb(194, 194, 194);
}

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