iPadではcssのbackground-attachmentを使えないらしい

2013-11-06

背景をcssからsvgに移行してみました。これでますます色んな解像度に対応できるようになった・・・かも？

その過程で1つ問題に当たったので、それについてメモ。最初は

body {
    background-image: url("background.svg");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

みたいに設定していたのだけれど、これだとiPadでうまく表示されない。どうやら、iPadはbackground-attachmentに対応していないようです。・・・って、全部タイトルに書いちゃったけれど。

しょうがないので、HTMLに

<div id="background"></div>

って要素を付け足して、

#background {
    background-image: url("/background.svg");
    background-repeat: no-repeat;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
}

とすることで対応。かなり文字数増えちゃったねー・・・悲しい。

ま、元のCSS版よりは短くなったからいいか。そのCSS版は一応こちらに残しておきます。CSSで絵を描く方法、的な？

参考: iPad用背景固定とJPGの謎 - らぶびあん日記