header背景图不显示及屏幕缩小时无法下压元素问题咨询

1. Header背景图无法显示的问题 #

原因：CSS文件位于resources/css/目录下，当前background-image的路径是相对于CSS文件的，./resources/images/pattern.jpeg会指向不存在的resources/css/resources/images/pattern.jpeg；而HTML中img标签的路径是相对于根目录的，所以能正常加载。

修改方案：修正CSS中的背景图路径，改为相对CSS文件的正确路径：

header {
    position: relative;
    width: 100%;
    height: 130px;
    /* 从css目录退到resources层级，再进入images文件夹 */
    background-image: url('../images/pattern.jpeg');
    background-size: cover;
    background-position: center;
}

2. 屏幕缩小时Header无法下压下方元素的问题 #

原因：

• Header设置了固定高度height:130px，屏幕变窄时，h1的大字体（100px）会超出固定高度，导致内容溢出
• h1使用position:absolute脱离文档流，Header高度无法随内容自动调整

修改方案：

1. 将Header的固定高度改为最小高度，同时用flex布局实现h1居中（避免脱离文档流）：

header {
    position: relative;
    width: 100%;
    /* 替换固定height为min-height，允许高度自适应 */
    min-height: 130px;
    background-image: url('../images/pattern.jpeg');
    background-size: cover;
    background-position: center;
    /* flex布局实现h1垂直+水平居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0; /* 添加上下内边距，避免内容贴边 */
}

header h1 {
    /* 移除absolute定位 */
    /* position: absolute; */
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100px;
    font-weight: bold;
    color: khaki;
    text-align: center;
    max-width: 90%; /* 限制最大宽度，避免文本超出容器 */
}

2. 可选：添加响应式字体大小，让h1在小屏幕自动缩小，优化显示：

@media (max-width: 768px) {
    header h1 {
        font-size: 50px;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 36px;
    }
}

修改后，Header背景图可正常显示，屏幕缩小时Header会随内容自动调整高度，下压下方元素，同时文本不会溢出容器。

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