CSS Reference

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 ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome