CSS

【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プロパティに指定されていないプロパティの値は、初期値が指定されたことになる。
  • カンマ区切りで複数の背景画像を指定可能ですが、そのときに指定する背景色は、一番右側で指定した画像にしか指定できない

背景の一括設定のまとめ

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

まとめ

  • backgroundを使うと背景関連のプロパティを一括で設定できる
  • background-positionとbackground-sizeの値を1つだけ指定した場合は、background-positionの指定として扱われる
  • background-positionとbackground-sizeの値を2つ指定する場合は、「/」で区切ってposition、sizeの順に指定する
  • background-clipとbackground-originの値を1つだけ指定した場合は両方に適用される
  • background-clipとbackground-originの値を2つ指定した場合は1つ目がorigin、2つ目がclipの指定として扱われる
  • backgroundに指定されなかったプロパティは、初期値が指定されたことになる

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました