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 | ○ |