CSS Reference

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 プロパティやセレクタを逆引きできます。

Edge(Chromium)
Firefox
Chrome
Safari
iOS Safari
Android Chrome