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 プロパティやセレクタを探す

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

IE11
Edge(EdgeHTML)
Edge(Chromium)
Firefox
Chrome
Safari
iOS Safari
Android Chrome

このページの上部へ