スマホで背面画像を固定したい

Question

パソコンではattachmentなどが適用されますが、スマホはまだ対応できないみたいですね。何か良い方法はないでしょうか？

Answer 1

Android Browser のみ対応できないようですね。

【Can I use... Support tables for HTML5, CSS3, etc】
http://caniuse.com/#feat=background-attachment

【スマホで背景fixedしたい時のCSSメモ - Qiita】
http://qiita.com/volkuwabara/items/bedaf09244f5cdebb228

body::before {
  background:url('bg.png') no-repeat left top;
  background-size: 100% auto;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 108px;
  content: "";
  z-index: -1;
}

Comments

[konishijin]

ありがとうございます。固定はできたのですが、スクロールできなくなって以下のコンテンツが見れなくなりました。。

[kei344]

リンク先のサンプル（ http://jsrun.it/volkuwabara/w5KY ）も同じ状況ですか？

[konishijin]

サンプルと似ています。コンテンツ部分は半透明にしているのですが、僕がしているサイトは背面画像固定した場合背面画像は元サイズで拡大表示されて荒いです。かといってbackground-size:cover;だと画像は綺麗に固定されますが、以下のコンテンツが見れなくなります。。

[kei344]

リンク先のサンプルでもスクロールできませんか？

> 拡大表示
画像サイズを2倍にするなどで対応できるものですか？

> 以下のコンテンツが見れなくなります
すいませんがHTML/CSSの全体像がわからないため何が影響しているかちょっとわかりません。

[konishijin]

リンク先のサンプルではスクロールできます。スマホで確認したときにスクロールができなくなる or スクロールはできるが背面画像が拡大されてしまい荒い画像になるという症状です。PCは、問題なく表示もスクロールもできます。
こういった事例はあまりおきないのでしょうか。

[kei344]

Android は機種/OS/ブラウザ全てについてたくさんあるため、挙動が違うケースに出会うことはあります。特に Android の標準ブラウザは多い気がします。

【スマートフォンのバグまとめ】
http://matome.naver.jp/odai/2132892555765887301

[konishijin]

ありがとうございます。
なぜか、background-sixe:cover; z-indexを-1ではなく0にしたらスマホでもきちんと映るようになりました。ありがとうございました。

Answer 2

div#bgタグなどを一つ作り

#bg {
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(bg.jpg) center center no-repeat;
    background-size: cover;
}

で背景に設置するのはどうでしょう?

Comments

[konishijin]

ありがとうございます。ネットでもそれは確認したのですが、なぜか実装されず。