スマホでbackground-size:coverとbackground-attachment:fixedが効かない時【パララックス】

Tips Web

スマホでは何故かbackground:coverとbackground-attachment:fixedが効かなくなり背景の画像が拡大されてパララックスが実現されなくなります。

そこで、このハゲーーーー!!ってなって色々解決策を考えたり調べたりしてとりあえず対処法を見つけましたww
短い備忘録です。

スポンサードリンク

以下のCSSでなんとか解決

以下のコードでパララックスのようなことができます。


  .main {
    background: none;
  }

  .main::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transform: translate3d(0, 0, -1px);
    transform: translate3d(0, 0, -1px);
    width: 100%;
    height: 100vh;
    background: url(画像のurl) center/cover no-repeat;
    -webkit-background-size: cover;
  }

もともとmainに指定しているbackgroundをnoneにして非表示にします。

そして擬似要素にpositionでfixedをかけてあげてtransformで下の階層に設置してあげます。
*スマホだとz-indexが効かないことがあるのでtransformを使っています。

あとはbackgroundで画像のurlとcenter/cover no-repeatで完成です。

以上です。
他に良い方法があれば教えてくださ〜い。

参考:
PC/スマートフォンで背景画像を固定する
スマホ背景をfixedしたい時のメモ

Webのコトでお困りの方

ホームページの制作・修正・リニューアル等のお手伝い致します!!詳細はこちら

まずは下のリンクから気軽にご相談ください^ ^

SNSからのDMの方が早くレスポンスできます。