CSS: スマホの背景に画像を置いたが100%fixedにならない時の対処

はい、今日も今日とて意味のわからないタイトルになりました。
何がしたいかと言いますと、画面いっぱいに背景を置いて、それをfixed、つまり固定したいと思った時にスマホじゃbackground-attachmentが効かない場合があって100%にならない。

okわかった。んじゃ、background-size: coverにしたらどうよ・・・ダメじゃんって時の話です。

何故に、このような記事を今書いているかと言いますと、ギターを弾き方れ!をちょっといじっていまして、スマホに対応させるべく色々していたわけです。普通に、背景色を指定してやっていたのですがどうも味気ないので何かしら画像でも貼っつけようかと思いたち、画像を探し、web開発環境からスマホを選んで、いよいよと言う時に、あれ?スクロールしたら背景がついてこないという場面に遭遇したわけです。

あぁ、ベンダープレフィックスがついてないからか、と最初は思っていたのですが、つけてみても改善しない。さて、どうしようか・・・と相成りまして現在に至ります。もっとも、最初は1920x1080pxのサイズだったので、デカイしスマホ用に縦を600pxほどにしてもまだデカイ。んじゃ、いっそのこと90度回転させるかとなって、383×680のサイズで小さい画像をもうひとつ作りまして、画像自体を90度回転させておきました。

これなら、iPhoneあたりでも大丈夫なはずと思いつつ、設定してみると、やはりスクロールについてこないと言うことで、色々調べてみたら、やっぱbackground-attachment自体がスマホに対応してなかったりするというのがわかりました。iOSは対応しているということでしたが、うまく動作しなかったので対応していないということにしときます。

最初の設定

これはPCならイケルんです。height: 100%にして、background-size: cover;により、背景画像を拡大縮小して表示してくれます。場合によってはbackground-attachment: fixed;もいらないかも知れません。しかしこれではスマホでうまく動作しないわけですよ。

そこで、htmlとbodyにそれぞれ背景画像を設定して、メディアクエリでスマホの時だけ小さい画像を使い、かつbody::beforeでbodyの前に画面いっぱいの背景画像とそれをfixedする設定を書けばよいのではないかと言う事になり次のようになりました。

動作した内容

このような感じになりました。

body::beforeは別にそれぞれのメディアクエリで書いても良いのですが、もしかしたらリサイズがあるかも知れないという事から通常時でも一応入っています。
通常時はbody::beforeをdisplay: none;で非表示にしておいて、それぞれのメディアクエリで必要な時にdisplay: block;にすることで表示しています。

メディアクエリでmax-width部分にemを使っていますが、これは一応16pxのフォントサイズだった場合で考えています。だいたいこれぐらいって感じなので厳密にはきちんと計算しないといけないわけですが、基本計算としては、1em = 16px : 50em = ? というような感じで計算しています。逆を言えば、欲しい横幅÷16 = ?emと言うことでしょうか。
max-width: 50emで背景画像の指定なしとしていますが、多分これぐらいの解像度になるとタブレットでしょうから、無線ルーターあたりを利用しているだろうと考えて「重い画像をダウンロードしたまえ」と言う感じにしています。大小の画像を用意したわけですけれども、ここに「中」サイズを用意すれば、その画像を指定しても良いかも知れません。

body::beforeの説明は特別不要かと思いますが、ようは縦横めいいっぱいに広げた背景画像をposition: fixedで固定しているわけです。これによって、background-size: cover;等が動作しないスマホの場合でもbody::beforeが動作して背景に画像を配置することができるわけです。

動作確認は、(背景画像が)わかりにくいですけどギターを弾き方れ!でどうぞ。PCからも見て確認して頂けるとありがたいです。
また、そろそろ夏休みで、夏休み明けぐらいには文化祭やらうんぬんで、何かしらバンドでも組もうかとか、ギター弾き方ってみようか始めてみようかなんて、女の子受けを狙っているよこしまな考えのそこの学生諸君も是非。

※ ちなみに今、スマホ用にメニューをどうしようか色々考えているところでして、スマホ画面でのメニューは、画面左上タイトル横の●です(笑)

codepenでのサンプル

See the Pen CSS: スマホの背景の固定の補足と実例 by Hidekichi (@Hidekichi) on CodePen.


フルページ表示
※ フルページ表示はhtmlやcss等のソースビューのない画面モードです。このアドレスを実機、あるいはchromeの携帯エミュレーター等で試してみてください。
※ 画像を適用させるにあたってGoogleDriveを利用しています。このため若干読み込みが遅いかも知れません。

GoogleDrive備忘録

共有リンクのidまでを

で書き換えるとimg等で読める。

スポンサーリンク

シェアする

フォローする