html - 加载相对于网站位置的背景图像

Question

我目前正在构建自己的网页，现在看起来就是这样。

目标是相对于文档路径加载宽标题背景图像:

图像的容器如下所示:

<header style="background-image: url('../../images/header.jpg');">
  <!-- Header Content --> 
</header>

我也尝试了以下方法，结果相同:

<header style="background-image: url('/images/header.jpg');">
  <!-- Header Content --> 
</header>

网站结构如下:

我的想法是将每个页面的标题图像放入相对的“images”文件夹中。

问题是:每个子页面都从根目录加载标题图像。我最好怎么做？

Answer 1

如果您的 HTML 文档位于“articles”文件夹内，则背景图像的 URL 应为 url('images/header.jpg') – 在本例中，“images”文件夹为与 HTML 文档处于同一级别，因此前面没有斜杠。