嗨，我想用百里叶填充一个选择的html，但出现一个错误

<div id="parallax-container">
  <div class="background-layer"></div>
  <div class="content-layer">
    <!-- 这里放置您的内容 -->
  </div>
</div>

#parallax-container {
  position: relative;
  overflow: hidden;
  height: 100vh; /* 设置容器的高度，使其占据整个视口 */
}

.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('背景图层的URL');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* 固定背景图层，实现视差效果 */
  z-index: -1; /* 将背景图层置于内容图层之后 */
}

.content-layer {
  position: relative;
  z-index: 1; /* 将内容图层置于背景图层之前 */
}

<div class="content-layer">
  <h1>欢迎使用百里叶填充效果！</h1>
  <p>这是一段示例文本。</p>
  <button>点击按钮</button>
</div>