background

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-color

背景色を指定すると、枠線の表示方法に影響します。

   
無指定
transparent
white

background属性を用いて背景色を指定しないと、既定のtransparentが適用され表示が変化することがあります。よってそのような場合にはbackground属性を用いず、background-imageなどを個別に指定します。

background-image

background-image: url("sample.png");
background-image - CSS | MDN

画像はurl()関数記法で指定します。

url("sample.png")
 

ファイル名ではなく、data URIでも指定できます。

url("data:image/png;base64,iVBORw0KGgoAAAANSUhE…")
 

background-position

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%の位置となります。

HTMLの情報サイトから、まとめて検索