在长滚动页面上按部分 ID 更改背景图像

Question

我正在改编 HTML5UP 模板（Astral：https://html5up.net/astral），但遇到了问题。我希望背景图像随着每个 ID 的变化而变化，但是每当我尝试使用 JavaScript 或 CSS 应用解决方案时，它都会修改该特定部分的背景（我不想更改），而不是整个部分的背景页。演示项目可以在这里找到：https://madisonpjones.com/projects/nwp

您可以在此页面上看到错误示例： https://madisonpjones.com/projects/nwp/#about

该部分的背景应如下所示： https://madisonpjones.com/projects/nwp/#visualize

换句话说，我想保持该部分的白色背景，改变实际背景。

我一直在使用的解决方案（产生错误）是这样的：

  <script>
// Change background image using pure JavaScript 
   document.getElementById('about').style.backgroundImage = 
   'url("assets/css/images/overlay.png"), 
   url("assets/css/images/bg2.png"), 
   url("assets/css/images//bg.jpg")'; 
 </script>
         

就上下文而言，Astral 主题是一个长滚动页面，已被修改为将各个部分显示为单独的页面。我确信这就是造成部分背景问题的原因，但我不知道如何造成的。

我尝试查看许多页面/论坛，但没有找到可行的解决方案。我看到很多使用 JS 或 CSS 更改常规网站背景的选项，但在这种情况下我似乎无法使它们中的任何一个起作用。预先感谢您的帮助！

Answer 1

根据您提交的代码，您似乎正在更改该部分的背景（在本例中为

<article id="about" class="panel">

，它正在按预期工作。

如果您想要更改页面背景，而不是部分，那么您应该使用

document.body

而不是

document.getElementById('about')

。

所以你的代码应该是：

<script>
// Change background image using pure JavaScript
document.body.style.backgroundImage = 'url("assets/css/images/overlay.png"), url("assets/css/images/bg2.png"), url("assets/css/images//bg.jpg")'; 
</script>