Эффект параллакса не работает, почему я хочу в моем приложении angular

Question

Я пытаюсь добавить несколько изображений параллакса в мое приложение angular. Поэтому я добавил одно изображение, но пытаюсь добавить больше изображений, поэтому при прокрутке вниз, когда мой контент меняется, изображения также меняются.

Вот мой код

<div class="parallax">
  <app-header></app-header>
  <router-outlet></router-outlet>
  <app-footer></app-footer>
</div>

Этот результат этого кода is

Вот здесь css

.parallax {
  background-image: url("../assets/back1.jpeg");
  height: 100%;
  min-height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax2 {
  background-image: url("../assets/back2.jpeg");
  height: 100%;
  min-height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax3{
  background-image: url("../assets/back3.jpeg");
  height: 100%;
  min-height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Итак, вы можете видеть, что я добавил 3 изображения, но я не знаю, кто их вызывает в моем app.module. html
Я пробовал таким образом

<div class="parallax">
  <div class="parallax2">
    <div class="parallax3">
      <app-header></app-header>
      <router-outlet></router-outlet>
      <app-footer></app-footer>
    </div>
  </div>
</div>

Результат этого кода

, но я подумал, вместо трех изображений, и изменится, когда я прокручиваю только вниз последнее показанное третье изображение и содержимое на нем движется. Я прилагаю изображения, пожалуйста, помогите мне исправить это