HOME > WEB > iPad用背景固定とJPGの謎
つぶやく
iPad用背景固定とJPGの謎

iPadを買って初めて自分のサイトを覗いた時の衝撃と言ったらsign02

まず、背景画像の小さいこと。
理由はまったくわからんのだけど、見た目として背景画像の解像度がコンテンツの解像度と合ってない・・・sweat02

ipad1.png

そして画像からはわかりにくいけども、CSSによる背景固定が効いてないbearing

iOS5からHTML5対応になって position: fixed には対応したみたいけど、body の background-attachment: fixed にはどうも対応してないようで、背景が一緒にスクロールされる状態。
まさかiPadでCSS再構成することになろうとはwww

で、解決策memo

one 背景の解像度

残念ながら理由はわからんのだけども、JPGをPNGにしたら直ったwww(GIFも大丈夫だったよ)
なぜなんだろう。なんかJPGに対しては特別な処理でもしてるんかな?

two 背景固定

HTML5には対応してるから、まずは宣言とタグを変更してある程度HTML5準拠に。

で、背景用の div を追加する。

【HTML】

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

 

それを position: fixed にして z-index を下げて background をつける。

【CSS】

#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:url(body.png);
background-repeat: no-repeat;
background-attachment: fixed;
z-index: -1;
}

 

なんでこんな裏技的なことしなきゃいけないんだsign01って感じだけど、まぁとりあえず思い通りの表示になったからよしとするww

ipad2.png

 

2件のコメント

  • 岩嵜

    すごい!!
    助かりましたm(_ _)m

    • らぶびあ

      お役に立てたならよかったです♪
      早いトコ対応してくれればこんな裏技ちっくにやらなくて済むんですけどねぇw

コメントを残す



このページのトップへ