# フルスクリーン背景画像の 100%表示と iPhone 対応方法

CSS で background image 100 cover で背景に画像がフルスクリーン表示やってみました。

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

貼るだけで背景100%

body {
  background-image: url("/bg.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

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

iPhone など一部のデバイスでは、background-size: cover がうまく機能しないことがあります。そのため、以下のような追加の CSS コードを使って、iPhone でも正しく動作するようにすることができます。

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

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

さらに、以下のようなコードを使って、幅や高さが 100%に設定され、ブラウザのサイズに合わせて背景画像が自動的に調整されるようにすることができます。

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-image: url("/img/bg.png");
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: cover;
  width: 100%;
  height: 100vh;
  overflow: auto;
}

# CSS の background のプロパティ

CSS で利用できる、background プロパティの詳細は以下の通りです。

  • background-clip:要素の背景の color または image を境界の下まで拡張するかどうかを設定します。
  • background-color:要素の背景色を設定します。
  • background-image:要素に 1 つ以上の背景画像を設定します。
  • background-origin:背景配置領域を設定します。
  • background-position:背景画像の初期位置を設定します。
  • background-repeat:背景画像をどのように繰り返すかを設定します。
  • background-size:要素の背景画像の寸法を設定します。
  • background-attachment:背景画像の位置をビューポートの中に固定するかどうかを設定します。

これらのプロパティを一括で設定することもできます。例えば、以下のように記述することができます。

一括設定

/* <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)

2020-05-23
  • css

関連記事

シェアボタン SNS ソーシャルリンクの作り方
CSS ::-webkit-scrollbar スクロールバーをカスタマイズ
sass-loader エラー
CSS :before & :after pseudo-elements 疑似要素で画像を重ねる
Font Awesome 使う
CSS background と conic-gradient で bookmark のブックマーク作る
HTML 特殊文字エンティティ参照
html5 新タグ要素と廃止タグ要素
safari でボタンタップしたら影が残る怪奇現象
css 学習 タイピング風アニメーションを css だけでやってみる
google color palette
css フルースクリンの背景画像と透けるログイン画面
placeholder text-align プレースホルダーの左寄せ・右寄せ
margin 上下効かない原因