app.css

background {
background: url(/assets/img/picture/xxx.jpg) no-repeat center/cover;
}

上記はすべて「background」の指定のため、**ショートハンド（複数指定）**を使って短く記述できます。
ショートハンドでは/coverとすることで background-size: cover を指定することができます。

`background-repeat` 背景画像を繰り返して表示する

指定	説明
repeat	全面にリピートして表示します。デフォルトはこの状態です。
repeat-x	X方向、つまり横方向にリピートして表示します。
repeat-y	Y方向、つまり縦方向にリピートして表示します。
no-repeat	名前の通り、リピートはしません。

`background-size` 背景画像のサイズを調整する

画像が大きすぎて要素からはみ出してしまう時

指定	説明
auto	自動算出します。基本は元画像の大きさそのままです。
contain	元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。
cover	元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。
数値(px)	明示的にpxで大きさを調整します。
数値(%)	要素に対しての割合で指定します。

指定	説明
キーワードで指定	center、left、right、top、bottomという風に、位置を言葉で指定します。
数値(%)	要素の左上からの位置を、要素を基準にしたパーセンテージで指定します。
数値(px)	要素の左上からの位置を、明示的にpxで指定します。

： auto 基本そのままの大きさ
： cover 要素を埋める
: contain 背景画像全体が見える