如何解决CSS中Header本地背景图片无法显示的问题

1. 修正HTML结构错误 #

你的HTML代码存在结构违规问题：<body>标签写在了<head>标签前面，不符合HTML规范，会导致浏览器解析样式时出现异常。正确结构需要将<head>放在<body>之前，且整体包裹在<html>标签内。

修正后的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="BestChess.css">
    <title> BestChess </title>
</head>
<body>
    <div class="header">
        <h1>BestChess</h1>
    </div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Learn</a></li>
            <li><a href="#">Puzzles</a></li>
            <li><a href="#">Games</a></li>
        </ul>
    </nav>

    <div class="column">
    </div>
</body>
</html>

2. 修复CSS的background属性语法错误 #

你当前CSS中background属性使用逗号分隔值，这是多背景的写法，但你这里是单一背景，应该用空格分隔属性值：

.header { 
    background: url("BestChessHeader.jpg") left top repeat;
    padding: 20px;
}
h1 {
    text-shadow: 2px 2px blue;
}

也可以拆分属性让代码更清晰：

.header { 
    background-image: url("BestChessHeader.jpg");
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
}

3. 确认本地图片的路径正确性 #

这是本地图片无法加载的最常见原因，按以下场景排查：

• 图片与CSS文件同目录：确保文件名完全匹配（注意大小写，Linux/服务器环境下大小写敏感），后缀正确（比如实际是.jpeg而非.jpg）。
• 图片在CSS文件的子目录：比如图片放在images文件夹下，路径要写成url("images/BestChessHeader.jpg")。
• 图片与HTML文件同目录，CSS在单独文件夹：比如CSS在css文件夹，图片和HTML在根目录，路径要写成url("../BestChessHeader.jpg")（../表示回到上一级目录）。

4. 用浏览器开发者工具排查 #

按F12打开开发者工具：

• 切换到Network标签，刷新页面，查看图片请求状态：若显示404，说明路径错误，根据实际路径调整；
• 切换到Console标签，查看是否有相关报错信息，辅助定位问题。

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