Blog

スマホ対応！background-attachment: fixedなしで実装するパララックス効果の作り方

2025年04月22日

パララックス背景を実装して、iPhoneで動作確認してみたところ、思ったように動作せず違和感がありました。調べてみたところ、background-attachment: fixed; を使って背景を固定する方法は、iOS端末では正しく対応していない（または制限されている）ことがわかりました。

そこで、background-attachment: fixed; を使わずにパララックス効果を実現できる方法を調べて、無事に実装することができました。

自分用の備忘録として、この経験と方法をここに記録しておきます。

<div id="m-02">
     <p>contact</p>
</div>

article#m-02 {
  background-image: url(img/f01back.png);
  position: relative;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

変更後▼

article#m-02 {
  position: relative;
}

article#m-02:before {
  background-image: url(img/f01back.png);
  position: fixed;
  background-size: cover;
  background-position: center;
  content: "";
  display: block;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

これでスマホ環境でも問題なく、スタイリッシュなパララックス表現が可能になりました。
同じような悩みを持っている方の参考になれば嬉しいです！

今回参考にしたサイトはこちら▼