background属性は、以下の属性を速記する手段です。
| 属性 | 初期値 |
|---|---|
| background-clip | border-box |
| background-color | transparent |
| background-image | none |
| background-origin | padding-box |
| background-position | 0% 0% |
| background-repeat | repeat |
| background-size | auto auto |
| background-attachment | scroll |
複数の属性を同時に記述できますが、省略した属性には初期値が設定されます。
background-image: url("sample.png");
background-image - CSS | MDN
画像はurl()関数記法で指定します。
ファイル名ではなく、data URIでも指定できます。
Formal syntax: <position>#background-position - CSS | MDN
positionは、以下の書式で指定します
Formal grammar: [ [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ] ]<position> - CSS | MDN
値を1つだけ指定した場合、それはx軸方向の位置となり、y軸方向は中央を意味するcenterまたは50%の位置となります。