CSS background 属性

定義と用法

background ショートカット属性は、一つの宣言ですべての背景属性を設定します。

以下の属性を設定できます：

値を設定しなくても問題は発生しません。例えば、background:#ff0000 url('smiley.gif');も許可されています。

通常、この属性を使用することをお勧めします。各属性を別々に使用するよりも、この属性が古いブラウザでも良いサポートを受けており、入力する文字数も少ないためです。

参照もしくは

CSS タイプ：CSS 背景、CSS 背景（高度）

HTML DOM リファレンスマニュアル：background 属性

例

すべての背景属性を1つの宣言で設定する方法：

body
  { 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
  }

実際に試してみる

CSS 文法

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

属性値

値 説明 CSS
background-color 使用する背景色を規定します。 1
background-position 背景画像の場所を規定します。 1
background-size 背景画像のサイズを規定します。 3
background-repeat 背景画像をどのように繰り返すかを規定します。 1
background-origin 背景画像の位置を規定します。 3
background-clip 背景の描画範囲を規定します。 3
background-attachment 背景画像が固定されるか、ページの残りの部分とともにスクロールするかを規定します。 1
background-image 使用する背景画像を規定します。 1
inherit 親要素から background 属性の設定を継承するべきであることを規定しています。 1

技術的詳細

デフォルト値： 指定されていません
継承性： no
バージョン： CSS1 + CSS3
JavaScript 文法： object.style.background="white url(paper.gif) repeat-y"

ブラウザのサポート

テーブルの数字には、その属性を完全にサポートする最初のブラウザのバージョンが記載されています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5