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

スマホでは何故か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したい時のメモ



Posted

in

,

Tags: