関連するプロパティを一気に指定できるショートハンド型は楽なので覚えておきたいところです。
今回は背景に関する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: url(xxx.jpg) coral no-repeat center/40% 80%
}色・画像・繰り返し・基準/サイズで指定しています。
「背景画像にグラデーションをかける」でも書きましたが、画像は色より上に重なりますので覚えておきましょう。
background一括指定のその他注意点
有名なバグとして、background-attachement: fixed と background-size: cover を併記すると、主にiOSで表示がおかしくなります。
個人的な注意点としては、
「transitionやanimationでbackground-sizeを変えるときは個別指定する」
「ホバーボタンの作り方」で少しふれていますが、background-sizeの値を変更するアニメーションを使うときは個別に指定しておかないと何故かエラーになる場合があります。
あと、一括指定だけの話ではないですが、background-attachmentにfixedが指定されているとき、background-originは無視されます。固定するのに基準位置つけても仕方ないですしね。
