背景に関するスタイルシート属性

background

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

書式

background: color image repeat attachment position

属性値

color

背景色を指定します。色はスタイルシート属性colorと同様に指定するか、次の値の中から指定します。

値	説明
transparent	透明色（省略値）
inherit	継承

image

背景に使用する画像を指定します。

image
値	意味
none	画像なし（規定値）
url(`URL`)	`URL`で指定した画像を表示
inherit	継承

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

repeat

画像の並べ方を指定します。

repeat
値	意味
repeat	画像を縦横に並べる（省略値）
repeat-x	画像を横方向にのみ並べる
repeat-y	画像を縦方向にのみ並べる
no-repeat	画像を並べない
inherit	継承

attachment

画面をスクロールさせたときの背景画像の扱いを指定します。

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	継承

例

スタイルシート属性 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

属性値