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

Question

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

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

图像的容器如下所示：

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

我也试过下面的方法，结果一样：

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

网站结构如下：

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

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

Answer 1

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

Loading background image relative to website location