background

スタイルシート属性 background は、背景の色や画像、スクロール方法、開始位置を指定します。

書式

background: color image repeat attachment position

属性値

color
背景色を指定します。色はスタイルシート属性colorと同様に指定するか、次の値の中から指定します。
背景色
説明
transparent 透明色(省略値)
inherit 継承
image
背景に使用する画像を指定します。
背景画像
意味
none 画像なし(規定値)
url(URL) URLで指定した画像を表示
inherit 継承

ローカルファイルのURLを指定する場合は、 url(file:///C:/image/back.gif) のように指定します。

repeat
画像の並べ方を指定します。
背景画像の並べ方
意味
repeat 画像を縦横に並べる(省略値)
repeat-x 画像を横方向にのみ並べる
repeat-y 画像を縦方向にのみ並べる
no-repeat 画像を並べない
inherit 継承
attachment
画面をスクロールさせたときの背景画像の扱いを指定します。
背景画像のスクロール
意味
scroll 一緒にスクロールする(省略値)
fixed スクロールしない
inherit 継承
position-x
背景の横方向の開始位置を指定します。10%のように割合で指定するか、次の値の中から選びます。
position-x
意味
left 左端(省略値)
center 中央
right 右端
position-y
背景の縦方向の開始位置を指定します。10%のように割合で指定するか、次の値の中から選びます。
position-y
意味
top 上端(省略値)
center 中央
bottom 下端

background-color

スタイルシート属性 background-color は背景の色を指定します。

書式

background-color: color

属性値

color
背景色を指定します。色はスタイルシート属性colorと同様に指定するか、次の値の中から指定します。
説明
transparent 透明色(省略値)
inherit 継承

対応状況

Webブラウザ 対応状況
Chrome Supported
FireFox 3.0.4 Supported
Internet Explorer 6.0 Supported
Opera 9.62 Supported
Safari 3.2.1 Supported

スタイルシート属性 background-color の使用例と表示サンプルを示します。表示結果はブラウザによって異なることがあります。

背景の<span style="background-color: silver">色を指定</span>します。

背景の色を指定します。

background-image

スタイルシート属性 background-image は背景の画像を指定します。

書式

background-image: image

属性値

image
背景に使用する画像を指定します。
image
意味
none 画像なし(規定値)
url(URL) URLで指定した画像を表示
inherit 継承

ローカルファイルのURLを指定する場合は、 url(file:///C:/image/back.gif) のように指定します。

background-image: url(http://www.example.com/image/back.gif);

background-repeat

スタイルシート属性 background-repeat は背景の画像の並べ方を指定します。

書式

background-repeat: repeat

属性値

repeat
画像の並べ方を指定します。
repeat
意味
repeat 画像を縦横に並べる(省略値)
repeat-x 画像を横方向にのみ並べる
repeat-y 画像を縦方向にのみ並べる
no-repeat 画像を並べない
inherit 継承

background-attachment

スタイルシート属性 background-attachment は画面をスクロールさせたときの背景画像の扱いを指定します。

書式

background-attachment: attachment

属性値

attachment
画面をスクロールさせたときの背景画像の扱いを指定します。
意味
scroll 一緒にスクロールする(省略値)
fixed スクロールしない
inherit 継承

background-position

スタイルシート属性 background-position は背景の開始位置を指定します。

書式

background-position: position-y position-x

属性値

position-y
背景の縦方向の開始位置を指定します。10%のように割合で指定するか、次の値の中から選びます。
意味
top 上端(省略値)
center 中央
bottom 下端
position-x
背景の横方向の開始位置を指定します。10%のように割合で指定するか、次の値の中から選びます。
意味
left 左端(省略値)
center 中央
right 右端