网页Div背景图（Hero Image）无法显示问题求助

看起来你已经照着Hero Image的思路实现了，但图片不显示的问题大概率出在容器高度计算或者路径解析上，咱们一步步来排查解决：

1. 先搞定容器高度的百分比依赖 #

你的.kendrick用了height: 50%，但百分比高度的计算依赖父元素的明确高度。虽然.body-container设置了min-height: 100%，但没有明确的height: 100%，浏览器可能无法正确计算出它的高度，导致子容器的百分比高度直接失效（变成0高度，自然看不到图片）。

推荐两种修改方案：

/* 方案1：给父容器补全明确高度 */
.body-container {
  min-height: 100%;
  height: 100%; /* 新增这行，让父容器高度明确 */
}

/* 方案2：改用视口单位vh（更适配响应式场景） */
.kendrick {
  /* 把height: 50%替换成下面这行 */
  height: 50vh;
  background-image: url("/images/kendrick!.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

2. 再验证图片路径的解析逻辑 #

你说路径在其他地方生效，但要注意绝对路径和相对路径的差异：

• 开头的/images/是根目录路径，如果你是本地直接打开HTML文件（不是通过服务器运行），这个根目录会指向你的系统根目录，而非项目文件夹，图片自然找不到。
• 改成相对路径试试，根据你的文件结构调整：

/* 如果styles.css和images文件夹在同一层级 */
background-image: url("images/kendrick!.jpg");

/* 如果styles.css在css文件夹里，images在项目根目录 */
background-image: url("../images/kendrick!.jpg");

3. 排查文件名的特殊字符 #

kendrick!.jpg里的感叹号虽然大部分系统支持，但少数服务器或浏览器可能对特殊字符的解析有兼容问题，建议把文件名改成kendrick.jpg，同时同步更新CSS里的路径。

4. 快速调试小技巧 #

如果还是不行，用浏览器开发者工具（F12）定位问题：

• 找到.kendrick元素，查看Computed面板里的高度是否为0，如果是，就是容器高度的问题。
• 查看Background面板，若显示"Failed to load resource"，说明还是路径解析错误。

按照上面的步骤排查，应该能解决你的问题。

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