kdcsライブラリー

背景固定のパララックス効果は「background-attachment:fixed;background-size: cover」で背景画像を固定することで実装できるが、iPhoneなどios機ではこの方法が使えない。そこで背景画像固定用のブロック要素を用意してブロック要素自体を固定するという手段。
固定する要素には疑似要素「::before」を使い、z-indexで位置を下位にする。

div.hoge::before{
  display:block;
  content:"";
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url(./images/bg-image.jpg) center no-repeat;
  background-size:cover;
}