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 |
複数の属性を同時に記述できますが、省略した属性には初期値が設定されます。
背景色を指定すると、枠線の表示方法に影響します。
| 無指定 | |
| transparent | |
| white |
background属性を用いて背景色を指定しないと、既定のtransparentが適用され表示が変化することがあります。よってそのような場合にはbackground属性を用いず、background-imageなどを個別に指定します。
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%の位置となります。