使用带有h1的header标记，h1显示所有字体修改。背景图像将不会显示。我已经通过对img标签使用相同的代码验证了图像位置的有效性。当屏幕缩小时，收割台也不会向下推动下部元件。下面是html和css：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dasmoto's Arts & Crafts</title>
<link rel="stylesheet" href="./resources/css/index.css">
</head>
<body>
<header>
<h1>Dasmoto's Arts & Crafts</h1>
</header>
<section id="brushes">
<h2>Brushes</h2>
<img src="./resources/images/hacksaw.webp" alt="">
<h3>Hacksaw Brushes</h3>
<p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes.</p>
<p class="links">Starting at $3.00 / brush.</p>
</section>
<section id="frames">
<h2>Frames</h2>
<img src="./resources/images/frames.webp" alt="">
<h3>Art Frames (assorted)</h3>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs.</p>
<span class="links">Starting at $2.00 / frame.</span>
</section>
<section id="paint">
<h2>Paint</h2>
<img src="./resources/images/finnish.jpeg" alt="">
<h3>Clean Finnish Paint</h3>
<p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.</p>
<span class="links">Starting at $5.00 / tube.</span>
</section>
</body>
</html>
header {
position: relative;
width: 100%;
height: 130px;
background-image: url('./resources/images/pattern.jpeg');
background-size: cover;
background-position: center;
}
header h1 {
position: absolute;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
}
section img {
display: block;
height: 150px;
width: 150px;
}
section p {
display: inline;
font-family: Arial, Helvetica, sans-serif;
}
#brushes h2 {
background-color: mediumspringgreen;
}
#frames h2 {
background-color: lightcoral;
}
#paint h2 {
background-color: skyblue;
}
.links {
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: blue;
}
缺少背景图像
这里的问题是相对于调用它的文件的相对路径./resources/images/pattern.jpeg，relative的意思。在您的情况下，css在您的css文件中，因此到图像的相对路径最终将类似于./resources/css/resources/images/pattern.jpeg点斜线CCD_ 3表示"；在当前目录"中查找文件；其中css文件的当前目录是css文件夹。
因此，要么使用像../images/pattern.jpeg这样的正确相对路径，要么使用https://www.your-domain.com/resources/images/pattern.png这样的绝对路径
页眉未向下推送内容
这里有两个问题
首先，您为header元素设置了一个固定的高度
其次，您的h1具有position: absolute，因此不给出和"高度"；它本身就属于header元素。
删除两者应该会得到预期的结果。
请参阅下面的示例，还请注意，我已经更改了背景模式，以便在设置正确的文件路径时可以看到它运行良好。
header {
position: relative;
width: 100%;
background-image: url('https://img.freepik.com/vektoren-kostenlos/zufaelliges-quadratisches-halbtonmuster_1409-1062.jpg?w=2000');
background-size: cover;
background-position: center;
}
header h1 {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
}
section img {
display: block;
height: 150px;
width: 150px;
}
section p {
display: inline;
font-family: Arial, Helvetica, sans-serif;
}
#brushes h2 {
background-color: mediumspringgreen;
}
#frames h2 {
background-color: lightcoral;
}
#paint h2 {
background-color: skyblue;
}
.links {
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: blue;
}<header>
<h1>Dasmoto's Arts & Crafts</h1>
</header>
<section id="brushes">
<h2>Brushes</h2>
<img src="./resources/images/hacksaw.webp" alt="">
<h3>Hacksaw Brushes</h3>
<p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes.</p>
<p class="links">Starting at $3.00 / brush.</p>
</section>
<section id="frames">
<h2>Frames</h2>
<img src="./resources/images/frames.webp" alt="">
<h3>Art Frames (assorted)</h3>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs.</p>
<span class="links">Starting at $2.00 / frame.</span>
</section>
<section id="paint">
<h2>Paint</h2>
<img src="./resources/images/finnish.jpeg" alt="">
<h3>Clean Finnish Paint</h3>
<p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.</p>
<span class="links">Starting at $5.00 / tube.</span>
</section>您的index.html可能位于项目的根目录中，而CSS样式表位于/resources/css/index.css中。
您正在使用相对路径来包括图像。
相对文件路径指向相对于当前页面的文件。
因为你的index.html和index.css不在同一个目录中，所以它们有不同的相对路径。这就是为什么图像可以从HTML文件加载，而不能从样式表加载。现在，您可以在任何地方使用相同的绝对路径，或者调整CSS样式表中的相对路径。
这应该是从CSS文件到pattern.jpeg的正确相对路径。background-image: url('../images/pattern.jpeg');