背景の一括指定

説明

background: color image repeat attachment position; C1- ie3- N4-

値:	[ <'背景色'> \|\| <'背景画像'> \|\| <'背景画像の並べ方'> \|\| <'背景画像の固定配置'> \|\| <'背景画像の表示位置'> ] \| inherit

初期値：transparent none repeat scroll '0% 0%'、適用要素：すべて、継承：しない、%値：背景画像の表示位置のみ可、メディア：ビジュアル

このプロパティでは、背景関連のプロパティをまとめて設定することができます。必要な値は任意の順序で、半角スペース[ ]で区切って指定します。ここで指定しなかったプロパティの値は初期値となるので、注意が必要です。

ちなみに、background:url(URI) color;という指定は、画像が見つからなかった場合の背景色を設定します。

使用例


body {background:red}

p {background:url("tile.gif") gray 50% repeat fixed}

背景色 <'background-color'>

色	C1- ie3- N4- 色を指定。
transparent	C1- ie3- N4- 透明に設定。初期値。

背景画像 <'background-image'>

URI	C1- ie3- N4- 画像のURIを「url(URI)」の形で指定します。
none	C1- ie3- N4- 画像を使用しません。初期値。

背景画像の並べ方 <'background-repeat'>

repeat	C1- ie3- N4- 背景画像は、タイル状に敷き詰められます。初期値。
repeat-x	C1- ie3- N4- 背景画像は、横方向に並べられます。
repeat-y	C1- ie3- N4- 背景画像は、縦方向に並べられます。
no-repeat	C1- ie3- N4- 背景画像は、繰り返されずひとつだけ表示されます。

背景画像の固定配置 <'background-attachment'>

scroll	C1- ie3- N6- 背景画像は、内容と共にスクロールします。初期値。
fixed	C1- ie3- N6- 背景画像は、固定されスクロールしません。

背景画像の表示位置 <'background-position'>

%値 %値	C1- ie3- N6- 「0% 0%」という値は、画像の左上と、ボックスのパディング辺の左上を揃えます。「100% 100%」という値は、画像の右下と、ボックスのパディング領域の右下を揃えます。
長さ長さ	C1- ie3- N6- 「2cm 2cm」という値は、画像の左上と、ボックスのパディング領域の左から2cm上から2cmの点を揃えます。

表示位置のキーワード


「0% 0%」=「top left」=「left top」

「50% 0%」=「top」=「top center」=「center top」

「100% 0%」=「right top」=「top right」

「0% 50%」=「left」=「left center」=「center left」         (ie8- -ff3 -o9 -sf4 -gc2未対応)

「50% 50%」=「center」=「center center」                    (ie8- -ff3 -o9 -sf4 -gc2未対応)

「100% 50%」=「right」=「right center」=「center right」    (ie8- -ff3 -o9 -sf4 -gc2未対応)

「0% 100%」=「bottom left」=「left bottom」                 (ie8- -ff3 -o9 -sf4 -gc2未対応)

「50% 100%」=「bottom」=「bottom center」=「center bottom」 (ie8- -ff3 -o9 -sf4 -gc2未対応)

「100% 100%」=「bottom right」=「right bottom」             (ie8- -ff3 -o9 -sf4 -gc2未対応)

長さや%値が1つだけ与えられた場合、その値は水平方向の配置に適用され、垂直方向の値は「50%」になります。長さや%値が2つ与えられた場合、1つ目の値が水平方向、2つ目の値が垂直方向の値になります。また、長さと%値の組み合わせ(「50% 2cm」)や負の値も使用可能です。ただし、キーワードを、長さや%値と組み合わせることはできません。指定可能なキーワードの組み合わせは上の欄に示したもののみになります。

*1 CSS2.1においてbackground-positionプロパティにおいて、「キーワードを、長さや%値と組み合わせることはできません」という記述が削除されました。つまり、「top 25%」という記述も許可されます(ie8- -ff3 -o9 -sf4 -gc2未対応)。

背景の一括指定 (The background)

説明