【CSS】背景画像をいっぱいに設定する

2021年1月2日

画像を背景いっぱいに設定したい時ないですか？

そういった時に使えるCSSです。
下記は、bodyに背景いっぱいに設定する例です。

【CSS】

body {
/* 画像ファイルの指定 */
background-image: url(./img/background-img.jpg);
/* 画像を常に中央に配置 */
background-position: center center;
/* 画像を繰り返し表示しない */
background-repeat: no-repeat;
/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;
/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
background-size: cover;
/* 背景画像が読み込まれる前に表示される背景のカラー */
background-color: #EEEEEE;
}

css