iPhoneで「background-attachment: fixed」が聞かないときの対処法を紹介

background-attachmentのfixedを指定すると簡単に背景画像を固定させることができます。

とても便利なのですがiPhoneできかないという不具合があります。

きかない原因としては「background-attachment: fixed;」と「background-size: cover;」を同時に指定していることです。

この二つを同時に指定してしまうとiPhoneできかなくなるようです。

iPhoneで背景固定がきかない

まず 「background-attachment: fixed;」と「background-size: cover;」 を同時に指定したものを見てみましょう。

Androidのスマホではうまくいっていると思いますがiPhoneだとうまくいっていないことが確認できると思います。

body{
  background-image: url(bk.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
}

iOSでも背景固定をしたいときの対処法

対処法としてはbackground-attachmentは使用せずに「position: fixed;」を使用して次のように対応しました。

.wrap::before{
  position: fixed;
  content: "";
  top:0;
  left:0;
  width: 100%;
  height: 100vh;
  background-image: url(bk.jpg);
  background-position: center 0;
  background-size: cover;
  z-index: 1;
}

ポイントとしては下記になります。

heightに100vhを指定する
positionのfixedを使う