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

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

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

貼るだけで背景100%

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

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

各ブラウザーに対応するならあと一工夫

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

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

body:after使うこと

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

もう少し工夫

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-sizing: border-box;
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 のプロパティ

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)

2020-05-23
  • css

関連記事

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