#iphone 対応の背景画像フルースクリーン表示

CSS で background image 100 cover をやりたかったんです!
CSS があまり得意ではありませんが、bootstrap(opens new window)のおかげで CSS わからなくてもきれいな画面作れると思っていました。業務画面なら確かに細かいこだわりがない限り bootstrap で十分ですが、今回はいつもと違うログイン画面作りたかったので、背景に画像フルーカバーのものをやってみました。

#以外と簡単にできる

css の background-image 貼って background-size を over に指定すれば、何となくできました!楽勝!

こんな感じに貼れば OK

background-image: url('/bg.jpg');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;

css フルースクリンの背景画像と透けるログイン画面

#背景画像がズーム拡大される

ログイン画面に問題なくできましたが、ログイン以外の画面も使って見ようと思って全ページ同じ設定にしました。
だが問題発生!
iphone だけが画像化ける!ズーム拡大される!に遭遇しました。

iphone に background-size:cover 効かない!

端末によって対応できないって、なんだろうと思ってグーグル先生に聞きました。

答えは、ジョブズの iOS にあります。

iOS の高さ height はviewportではなく、document使っているから

iOS だけの設定があったみたいですね。同じ chrome ブラウザでも PC とアンドロイドはきれいに表示するのに、iOS だけは safari に従わないと行けないですね。
きっと何か裏話があるでしょう!知りたい。。。

解決案はbody:after使うこと

body:after {
  content: '';
  position: fixed;
  top: 0;
  height: 100vh;
  left: 0;
  right: 0;
  z-index: -1;
  background: url('/bg.jpg') center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#CSS の background のプロパティ

background に一括設定することもできますが、単一プロパティはこちら。

一括設定

/* <background-color> を使用 */
background: green;

/* <bg-image> と <repeat-style> を使用 */
background: url('test.jpg') repeat-y;

/* <box> と <background-color> を使用 */
background: border-box red;

/* 単一の画像、中央寄せかつ縮小 */
background: no-repeat center/80% url('/bg.png');

参考background-size: cover not working on iOS(opens new window)
参考CSS の background(opens new window)

stack overflow ありがとうございました。

2020-05-23
  • css