スマホで背景画像を固定したいのにbackground-attachment:fixed;が効かない【CSS】

hoge

スクロールしても背景画像が固定されてるやつ、

あれは「background-attachment:fixed;」

で設定しているのだけど、困ったことにスマホだと効かない。

 

なので、スマホ用代替策がこちら。

 

 

画面幅「767px」以下ならスマホとみなす様に設定してるけど、これはお好きな数字で。

CSS

@media only screen and (max-width:767px) {
  body{
    background:none;  /* 一旦、PC用の背景画像を消す。 */
  }
  body::before {
    background:url("http://example.com/aaa.png") repeat center center;
    background-size: cover;
    display: block;
    position: fixed;  /* ★スマホ用にコレで代替。 */
    top: 0;
    left: 0;
    width: 100vw;  /* ★サイズ指定。 */
    height: 100vh;  /* ★サイズ指定。 */
    content: "\A";  /* ★大事 */
    z-index: -1;  /* ★大事 */
  }
}