Sponsored Link
iOS7でもbodyの背景固定は反映されない
なんとなくiPadで自分のHPを見てみると、背景固定が効いていない状態でした。
少し調べて見るとスマホ等では、CSSの「position : fixed;」が効かないようです。
サイドバーとフッターも固定しているのですがそれらは問題ないので、どうやらiOSもバージョンアップによってある程度は対応するようになったようです。
「position : fixed;」を反映させる「iscroll.js」というものもあるようですが、とりあえず背景固定だけ実現できればよいのでCSSでなんとかできないかと調べて見ると、結局一つ箱を作ってそこに背景を指定するのがてっとり早そうでした。
Sponsored Link
対応策
HTMLはbodyの直下にダミー用のdivを設置
<body> <div class="background"></div>
CSSはこれだけでOKでした。
背景のサイズ指定もいるかな？と思ったのですが、今のところ問題なさそうです。
ただ、この設定ですと背景は左寄せになります。
.background {
z-index: -1;
background: url(背景.jpg) #000 no-repeat;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
こちらのサイトを参考にさせていただきました。
PC/スマートフォンで背景画像を固定する|Life like a clown
Sponsored Link
