[CSS] Background (一括指定)

CSS の backgroundは、 背景(background)に関するショートハンド ( いつくかの項目をまとめて、或は、単体で指定できる ) プロパティです。

一括指定可能な background プロパティ(値)

以下のプロパティをまとめて指定できます。

プロパティ	適用	値(例)
background-color	背景色	red, #f00, rgba(0,0,0,.5), transparent
background-image	背景画像	url(), gradient()各種
background-repeat	画像の繰り返し	repeat, no-repeat, space
background-position	画像の位置	top, left, center, %, px
background-size	画像サイズ	contain, cover, %, px
background-attachment	画像のスクロール	scroll, fixed, local
background-origin	画像配置の開始点	border-box, padding-box, content-box
background-clip	画像の表示領域	border-box, padding-box, content-box, text

※ 各値は省略可能。(省略した値は初期値となる)

※ background-position / background-size だけは、’ / (スラッシュ)’ を挟む

※ 値に順序の規定はないが、background-origin,background-clip は origin,clip の順で最後に置く( 1個のみ指定した場合は両方に適用 )

背景画像のショートハンド(例)

各プロパティの値のみをスペースで区切って指定します。

background: #fff url(img/tes.png) no-repeat 50% 50% / cover fixed border-box;

背景画像の複数指定(例)

backgroundは、
個々の背景レイヤー(ショートハンド)をカンマ ‘ , ‘ で繋ぐことで、複数指定する事ができます。

左(最初に書かれたもの)が一番上、右に行くほど下になります。

background: 
  url(img/tes.png) no-repeat 50% 50% / cover fixed, 
  #000 url(img/bg.png) repeat border-box;

※背景色は最後(一番右)のレイヤーのみ指定可能です。