Help us understand the problem. What is going on with this article?

スマホで背景fixedしたい時のCSSメモ

More than 3 years have passed since last update.

Mobile Safari等 background-attachment:fixed; が効かない環境でもそれらしいことをやりたい場合の方法として、position:fixed; の全面div要素を背面に敷いておく方法がよく紹介されていました。
少し改良?しつつメモ。


サンプル

http://jsrun.it/volkuwabara/w5KY
(スマホからどうぞ)

ソース

css
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;
}   

説明

  • 空のdivは嫌なので背景を敷きたい親要素の::before擬似要素でやった。(上記例ではbody)
  • iOS7以降のMobile Safariで、スクロールダウン中に上下のUIが引っ込む時に、その分の背景が埋まらない(touchendしないとheight:100%が更新されない) ので、height:100%;としつつ、この引っ込む差分(デバイス横向きだとこのUIが完全に隠れる) 108px (iOS7は上:64px, 下:44pxだった)を padding にあらかじて足してはみ出させておく。とはいえiOSのことばかりではないので、height:150%;とかにしておくのがてっとり早いかも。
  • background-sizecovercontainにしたかったがブラウザのUIが出たり引っ込んだりするときに背景サイズがガクガク変わって煩わしいので100% autoが素直そう。

その他

あるいは iOS7.1以降 iOS7 ではViewportにminima-ui指定を入れると、デフォルトでUIが隠れた状態でロードされるそうです。

html
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">

追記(2016/4/22):
iOS8以降では minimal-ui は廃止されたため、iOS7でしか意味をなしません。

いずれもやりかたがちょっと強引なので、background-attachment:fixed; に対応してくれればいいのになと思いました。
 


参考:
http://d.hatena.ne.jp/tt_clown/20130819/fixed_background
https://w3g.jp/blog/ios7_1_minimal-ui_warning

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした