html - ジャンボトロン固定画像ジャンプ

Question

友人のために Web サイトをコーディングしていますが、ページを下にスクロールすると、ジャンボトロンの背景画像がジャンプし続けます。誰かが私が間違っていることを説明してもらえますか? ありがとうございました。

Codepen リンクはこちら: https://codepen.io/Bekahlea/pen/bGqNaVo

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-image: url("../images/microphone-1074362_1920.jpg");
  height: 500px;
  background-attachment:fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0.3rem;
  color: white;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}