# フルスクリーン背景画像の 100%表示と iPhone 対応方法
CSS で background image 100 cover で背景に画像がフルスクリーン表示やってみました。
貼るだけで背景１００%
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)