関連するプロパティを一気に指定できるショートハンド型は楽なので是非覚えておきたいところです。
今回は背景に関するbackgroudのショートハンド指定について。
注意するのはサイズ指定と-origin -clipの順番だけなので、特に難しくもありません。
ショートハンドbackground
ショートハンドでは
を一括指定することが出来ます。
backgroundショートハンドでの厳守ルール
基本的に、空白区切りで指定していけば良いのですが、background-sizeを指定するときは必ず -position/-size とすること。（-sizeのみの指定はエラー）
-origin -clipの指定は最初に指定した値は-origin。 後に指定した値が-clip。という２つのルールがあります。
-sizeと-positionについては、それ自身が空白区切りの値で指定できる（0% 50% やtop leftなど）ので、ルールが無いと意味が分からなくなる為。
-originと-clipは同じ値を使って指定するから。
この2点さえ守っていれば後は順不同でOKです。
個別指定のときと同じく、省略したプロパティについては初期値が適用されます。
（例）
#{
background: coral url(xxx.jpg) no-repeat center/40% 80%
}色・画像・繰り返し・基準/サイズで指定しています。
「背景画像にグラデーションをかける」でも書きましたが、画像は色より上に重なりますので覚えておきましょう。
background一括指定のその他注意点
個人的な注意点としては、
「transitionやanimationでbackground-sizeを変えるときは個別指定する」
「ホバーボタンの作り方」で少しふれていますが、background-sizeの値を変更するアニメーションを使うときは個別に指定しておく必要があります。 -sizeだけ読み取ってくれるかなと期待したのですが駄目でした。
あと、一括指定だけの話ではないですが、background-attachmentにfixedが指定されているとき、background-originは無視されます。固定するのに基準位置つけても仕方ないですしね。
