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

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

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

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

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