background背景のプロパティをまとめて指定する
background プロパティは、背景色、画像、繰り返し、位置などを一括指定するショートハンドです。
backgroundの仕様
- 初期値
-
-
各プロパティに準じる
- 対象となる要素
-
- すべての要素
- 継承
-
- なし
詳細説明
値の指定方法は個別指定の各プロパティと同様です。それぞれの値は半角スペースで区切って指定します。
任意の順序で指定できますが、background-size プロパティの値は、backgroundposition プロパティの値にスラッシュ(/)で続けて指定します。
また、background-origin、background-clip プロパティの値は、1つ目が前者に、2つ目が後者に適用されます。1つだけの場合は、両方に適用されます。
backgroundのサンプルソース
body {
background: url(bg.png) 40% / 100px gray round fixed border-box;
}
/* 上記の指定は、各個別プロパティを使用した下記の指定と同等となります */
body {
background-color: gray;
background-position: 40% 50%;
background-size: 100px 100px;
background-clip: border-box;
background-origin: round;
background-attachment: fixed;
background-image: url(bg.png);
}
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |