PR

iPhone/iPadでのCSS背景固定

公開日: : 最終更新日:2014/08/08 Web制作

iOS7でもbodyの背景固定は反映されない

なんとなくiPadで自分のHPを見てみると、背景固定が効いていない状態でした。
少し調べて見るとスマホ等では、CSSの「position : fixed;」が効かないようです。
サイドバーとフッターも固定しているのですがそれらは問題ないので、どうやらiOSもバージョンアップによってある程度は対応するようになったようです。
「position : fixed;」を反映させる「iscroll.js」というものもあるようですが、とりあえず背景固定だけ実現できればよいのでCSSでなんとかできないかと調べて見ると、結局一つ箱を作ってそこに背景を指定するのがてっとり早そうでした。

対応策

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

PR

関連記事

マウスカーソルPNG画像を制作

マニュアル的なものを作る時にマウスカーソルの画像を使用したりするのですが、種類をきちんと揃えてい

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

ぱふぃん
建築パース・Webデザインなどのお仕事をしています。
カメラやデジタル系のガジェットと工作好き。
【LG 27MP38VQ-B】ノートPCを外付けディスプレイで大画面化【USB-RGB3/D】

部屋の隅にメタルラックでPCを設置しています。家に

【セイコー5】セイコー5がやってきた&ベルトの調整【SEIKO5】

セイコー5「SYMK43K1」がやってきた

【ユニクロ】KAWS カウズのUTを購入 2017【丸胴】

今年のUTもカウズコラボが丸胴 ユニクロがセ

【Peak Design(ピークデザイン)】CANON EOS M3 のハンドストラップを作ってみた【anchor links(アンカーリンクス)】

私のEOS M3での撮影スタイルはカバンの中に放り

【フード】CANON EOS M3 の周辺アクセサリーを購入【バッテリー】

最近EOS M3を普段使いに愛用しています。レンズ

【お絵かき】LEDテープライトを使ってトレース台を自作【ライトボックス】

娘がイラストを描くのにトレース台(ライトボックス)を欲しがっていた

【アレッシィ】Bunny & Carrot キッチンペーパーホルダーを改造【ALESSI】

アレッシィのグッズが大好きで昔から少しずつ集めてい

【docomo】15年ユーザーのドコモからMVNOにMNPをした話【OCNモバイルONE】

さようならドコモ 世間は「iPhone7」で盛り上がっていま

→もっと見る

  • まだデータがありません。

PAGE TOP ↑