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

Question

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

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

Image 的容器如下所示：

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

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

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

网站结构如下：

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

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

Answer 1

如果您的 HTML 文档位于“articles”文件夹中，则背景图片的 URL 应为 url('images/header.jpg')——在这种情况下，“images”文件夹与 HTML 文档处于同一级别，所以 否 在它前面加上斜线。