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で指定します。 |
background-size
： auto 基本そのままの大きさ
： cover 要素を埋める
: contain 背景画像全体が見える