【background】背景の設定

backgroundで背景関連のプロパティを一括設定する

backgroundプロパティを使用すると、背景関連のプロパティを一括で設定することができます。
例外はありますが、必要な値を半角スペースで区切って順不同で指定できます。
設定できるプロパティは下記になります。

• background-color
• background-image
• background-clip
• background-repeat
• background-size
• background-origin
• background-position
• background-attachment

background-positionとbackground-size

background-positionとbackground-sizeは、どちらも単位つきの値を指定できるので、どちらの指定なのかわからなくなります。
そのため値が1つの場合は、backgrond-positionの値として扱われます。
background-sizeの値を指定する場合は、まずbackground-positionの値を指定し、「/」で区切った後にbackground-sizeの値を指定します。

background: url(back.png) center center / 100%;

background-clipとbackground-origin

background-clipとbackground-originに指定できる値は全く同じなので、どちらに対する指定なのかわかりません。
そのため、値が1つだけ指定されている場合は、両方に適用されます。
値が2つ指定されている場合は、1つ目がbackground-origin、半角スペースで区切って2つ目がbackground-clipの指定として扱われます。

注意点

backgroundで背景設定をする場合には、次の点に注意が必要です。

背景の一括設定のまとめ

今回は背景の一括設定についてまとめました。
背景関連のプロパティはたくさんあるので、まとめて指定できるbackgroundプロパティはとても便利です。

みいと

Contact

興味を持ったものをいろいろと勉強しています。