HTML页面中Div内背景图片无法显示的问题求助

核心问题与修复点： #

• 高度属性语法错误：.banner类里的height: 100%vh;是错误写法，正确的全屏高度应为height: 100vh;（无需加百分号）。这个错误会导致div没有实际高度，背景图自然无法显示。
• 路径分隔符不规范：HTML中引入CSS、JS的路径用了反斜杠\，Web标准要求使用正斜杠/，虽然部分浏览器兼容反斜杠，但容易引发路径解析异常。
• 背景图路径需匹配实际结构：如果CSS文件在css/app.css目录下，/assets/bg/WebsiteBackground.png是根路径写法，需确认项目根目录下确实存在该文件；若用相对路径，应写成../assets/bg/WebsiteBackground.png（../表示回到css文件夹的父目录，再进入assets文件夹）。

修改后的代码： #

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title> A website about myself </title>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
    <div class="banner"></div>
</body>
<script src="js/app.js"></script>
</html>

CSS代码：

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.banner{
    width: 100%;
    height: 100vh; /* 修复高度语法错误 */
    background-size: cover;
    background-position: center;
    /* 根据实际文件结构调整路径，示例为相对路径 */
    background-image: url(../assets/bg/WebsiteBackground.png);
}

额外验证步骤： #

1. 打开浏览器开发者工具（F12），切换到网络标签，刷新页面查看背景图的请求状态：
   • 若显示404，说明路径仍错误，重新核对文件位置；
   • 若请求成功但看不到图，在元素标签里检查.banner的计算高度是否正常。

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