CSS background属性


例

div要素内で複数の背景画像を設定(およびそれらの位置を指定)する例:

body { background: #0080FF url('smiley.gif') no-repeat fixed center; }

試してみる »

ブラウザサポート

表の数字は、そのプロパティをサポートする最初のブラウザバージョンを示します。

属性
background 1.0 4.0 1.0 1.0 3.5

すべての主要ブラウザはbackgroundプロパティをサポートしています。

注意:IE8以前のバージョンは、1つの要素に複数の背景画像をサポートしていません。

注意:IE7以前のバージョンは「継承」の値をサポートしていません。 IE8では定義が必要です。!DOCTYPE。IE9は「継承」をサポートしています。


タグの定義と使用説明

背景の省略プロパティは、1つの宣言で全ての背景プロパティを設定できます。

設定できるプロパティは次のとおりです:background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment および background-image。

各値はスペースで区切り、順序は問いません。一部の値だけでも構いません。例:background:#FF0000 URL(smiley.gif);は許可されています。

デフォルト値: 個々のプロパティを参照してください。
継承: no
バージョン: CSS1+ CSS3の新しいプロパティ
JavaScript 構文: object object.style.background="red url(smiley.gif) top left no-repeat"


構文

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つ以上の背景画像を指定します。 1


関連記事

CSS チュートリアル:CSS 背景

CSS3 チュートリアル:CSS3 背景

その他の拡張