网页头部背景图片无法显示问题求助

问题核心原因 #

你的问题出在两处：一是HTML标签格式错误，导致浏览器解析DOM结构异常；二是CSS缺少背景图片的关键显示属性，且容器高度设置无法支撑图片展示。

步骤1：修复HTML标签错误 #

你写的闭合标签格式完全错误，正确的闭合标签不需要附带class或id属性，同时存在多余的引号。修正后代码如下：

<body>
    <div id="header">
        <div class="name">
            <h1>Author Name</h1>
        </div>   
    </div>  
</body>

步骤2：调整CSS样式确保背景图显示 #

原CSS中height:auto仅靠内部内容撑高容器，容易导致背景图被压缩或无法显示；加上background-size等属性可确保图片按预期展示。修正后代码：

h1 {
    margin: 20px;
    text-align: center;
    font-size: 60px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
}

#header {
    background-image: url(https://drive.google.com/uc?export=view&id=1jGtln4lbaCeJ0D6mdY_A1UMKTr2QFOLp);
    width: 100%;
    height: 300px; /* 设置固定高度，适配图片展示 */
    background-size: cover; /* 让图片覆盖容器，保持比例 */
    background-repeat: no-repeat; /* 禁止图片重复平铺 */
    background-position: center; /* 图片居中对齐 */
}

可选自适应高度方案 #

如果不想设置固定高度，可把h1的margin换成padding，避免外边距塌陷，让容器高度自适应内容：

h1 {
    padding: 20px;
    margin: 0;
    text-align: center;
    font-size: 60px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
}

#header {
    background-image: url(https://drive.google.com/uc?export=view&id=1jGtln4lbaCeJ0D6mdY_A1UMKTr2QFOLp);
    width: 100%;
    min-height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

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