いつも忘れるbackgroundプロパティのショートハンド記述ルール
項目の多いbackgroundプロパティをショートハンドで覚えるコツ。
毎回忘れて手間がかかる記述ルールのポイントをおさえるための備忘録
↓とりあえず以下の2点だけ暗記する！↓
① position / size
② 複数の背景画像の指定はカンマ区切り
position / size
background-positionの後に「/」で区切ってbackground-size指定する。
background-sizeを指定するときは必ずbackground-positionも必須になり、-position/-size の順に記述する。
（-sizeのみの指定はNG）
/* background-positionの後に「/」で区切ってbackground-size指定 */
.bg-sample {
background: #333 url('bg.png') no-repeat left top / cover content-box;
}
上記だけ気をつければ値がかぶることのない以下は好きな位置に記述して問題ありません。
※基本的な記述順序は下記の順番に従いますが厳密な順序は必要ありません。
- background-color
- background-image
- background-repeat
- background-origin
- background-position
- background-size
- background-attachment
- background-clip
複数の背景画像はカンマ区切り
position、repeat、sizeなどのプロパティも、カンマ区切りで各画像に対して個別に設定
レイヤーは上層（先に書いた方）が上になる。
背景色(-color)を指定する場合は、最後（最下層）に配置する。
/* 複数の背景画像はカンマ区切り -colorは最下層 */
.bg-layer {
background:
url('./img/bg-01.png') no-repeat left top / cover,
url('./img/bg-02.png') no-repeat right top / contain,
url('./img/bg-03.png') no-repeat left bottom / 30% #333;
}
レイヤー構造や、-colorプロパティのルール等、独自のややこしい面があるので都度記述しながら調整しましょう。
特定のプロパティのみを変更したい場合やJS等のプログラムで制御したい場合、または複雑な背景設定を行う場合は個別のプロパティを使用する方が管理しやすい場合も発生します。
適宜効率的な記述を心がけましょう。
backgroundプロパティのショートハンド記述の注意点
- Android 4.4以下では、「/」で区切る部分（background-size）がうまく機能しない可能性があります。
- スマートフォンなどの一部のデバイスでは、background-positionのleft、topなどのキーワード指定やbackground-sizeのcontain、coverが正しく動作しない場合があります。
- すべてのプロパティを指定する必要はありません。省略したプロパティは初期値が適用されます。
- ※古いブラウザでは、一部の機能がサポートされていない可能性があります。
