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