CSS:背景画像を固定するパララックス表現

CSSだけで簡単に背景画像を固定表現を実装できるようです。

<div class="background"/></div>
.background {
  background-image: url('../background.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

background-attachmentは、背景画像の位置を表示領域で固定するか、スクロールするかどうかを指定できるプロパティです。

PC版モダンブラウザーではサポート済みですが、SP版特にSafariではサポートされていないようです。
未検証ですがbeforeを使えばいけるようです。

background::before {
  content: "";
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(...);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  ...
}

参考サイト
https://webcreatetips.com/coding/3333/
https://fitudao.work/posts/72