CSS 背景画像

CSSは純色としての背景を適用することも、背景画像を使用して非常に複雑な効果を作成することも許可します。

CSSはこの点でHTMLよりもずっと能力があります。

背景色

使用できます background-color属性要素に背景色を設定します。この属性はどんな合法な色値も受け入れます。

このルールは要素の背景を灰色に設定します：

p {background-color: gray;}

背景色が要素のテキストから少し外側に少しだけ拡がるようにするには、内側マージンを追加してください：

p {background-color: gray; padding: 20px;}

自分で試してみてください

すべての要素に背景色を設定できます。これはbodyからemやaなどのインライン要素にまで含まれます。

background-colorは継承できません。デフォルト値はtransparentです。transparentは「透明」を意味します。つまり、要素に背景色が指定されていない場合、背景は透明であり、その祖先要素の背景が見えるようにします。

背景画像

画像を背景に配置するには、使用する必要があります background-image属性background-image属性のデフォルト値はnoneで、背景に画像が配置されていないことを意味します。

背景画像を設定するには、この属性にURL値を設定する必要があります：

body {background-image: url(/i/eg_bg_04.gif);}

ほとんどの背景はbody要素に適用されますが、これに限りません。

以下の例では、段落に背景を適用していますが、ドキュメントの他の部分には背景を適用していません：

p.flower {background-image: url(/i/eg_bg_03.gif);}

インライン要素に背景画像を設定することもできます。以下の例では、リンクに背景画像を設定しています：

a.radio {background-image: url(/i/eg_bg_07.gif);}

自分で試してみてください

理論的には、textareasやselectなどの代替要素の背景に画像を適用することもできますが、すべてのユーザーエージェントがこの状況をよく処理しているわけではありません。

また、background-imageも継承できません。実際、すべての背景属性は継承できません。

背景重复

背景画像をタイル状に配置する必要がある場合は、以下を使用できます： background-repeat 属性

属性値 repeat は、画像が水平方向と垂直方向にタイル状に配置されることを意味し、これまでの背景画像の通常の做法と同じです。repeat-xとrepeat-yは、画像が水平方向か垂直方向にのみ重複し、no-repeatは画像がどの方向にもタイル状に配置されません。

デフォルトでは、背景画像は要素の左上隅から始まります。以下の例を参照してください：

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

自分で試してみてください

背景定位

利用できます background-position 属性背景画像の位置を変更します。

以下の例では、body要素に背景画像を中央に配置しています：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

background-position 属性に値を提供する方法はたくさんあります。まず、いくつかのキーワードを使用できます：top、bottom、left、right、centerです。通常、これらのキーワードは対で使用されますが、必ずしもそうではありません。また、長さ値（例えば100pxや5cm）やパーセンテージ値も使用できます。異なる種類の値は背景画像の配置に少し異なる影響を与えます。

キーワード

画像配置キーワードは最も理解しやすいです。その名の通りの機能を果たします。例えば、top right は画像を要素の内側マージンエリアの右上隅に配置します。

規格に従って、位置キーワードはどの順番でも出現できますが、2つのキーワードを超えず（水平方向に1つ、垂直方向に1つ）を確保する必要があります。

一つのキーワードのみが表示されている場合、もう一つのキーワードは center とされます。

したがって、各段落の中央上方に画像を表示したい場合、以下のように宣言します：

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

以下は等価な位置キーワードです：

単一のキーワード 等価のキーワード
center center center
top top center または center top
bottom bottom center または center bottom
right right center または center right
left left center または center left

百分数値

百分数値の表現方法はより複雑です。画像を要素内に中央に配置したい場合、百分数値を使用するのは簡単です：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

これにより、画像が適切に配置され、中心が要素の中心と一致します。言い換えれば、百分数値は要素と画像に同時に適用されます。つまり、画像で 50% 50% と記述されているポイント（中心点）と、要素で 50% 50% と記述されているポイント（中心点）が一致します。

画像が 0% 0% に配置されている場合、その左上隅は要素の内側マージンエリアの左上隅に配置されます。画像位置が 100% 100% である場合、画像の右下隅は右マージンの右下隅に配置されます。

したがって、水平方向 2/3、垂直方向 1/3 に画像を配置したい場合、以下のように宣言できます：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

百分数値を提供する場合、その値は水平値として使用され、垂直値は 50% と仮定されます。これはキーワードと似ています。

background-position のデフォルト値は 0% 0%、機能的には top left に相当します。これが背景画像が常に要素の内側マージンエリアの左上隅からタイルされる理由です。ただし、異なる位置値を設定していない場合を除きます。

長さ値

長さ値は要素の内側マージン領域の左上角からのオフセットを示しています。オフセットポイントは画像の左上角です。

たとえば、設定値が 50px 100px であれば、画像の左上角は要素の内側マージン領域の左上角から右に 50 ピクセル、下に 100 ピクセルの位置に配置されます：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

これは百分数とは異なり、オフセットは左上角から左上角までの距離を示しています。つまり、画像の左上角が background-position 宣言で指定されたポイントと一致します。

背景関連

ドキュメントが長い場合、ドキュメントが下にスクロールすると、背景画像も同時にスクロールします。ドキュメントが画像の位置を超えると、画像は消えます。

以下の方法で変更できます。 background-attachment 属性このようなスクロールを防ぐために。この属性を使うと、画像が視覚領域に対して固定（fixed）と宣言され、スクロールに影響を受けません：

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

自分で試してみてください

background-attachment 属性のデフォルト値は scroll で、これはデフォルトでは背景がドキュメントとともにスクロールするときを意味します。

CSS 背景例

背景色を設定
この例では、要素に背景色を設定する方法を示します。
テキストの背景色を設定
この例では、部分テキストの背景色を設定する方法を示します。
画像を背景に設定
この例では、画像を背景に設定する方法を示します。
画像を背景2に設定
この例では、複数の要素に同時に背景画像を設定する方法を示します。
背景画像を繰り返す方法
この例では、背景画像を繰り返す方法を示します。
垂直方向に背景画像を繰り返す方法
この例では、背景画像を垂直方向に繰り返す方法を示します。
水平方向に背景画像を繰り返す方法
この例では、背景画像を水平方向に繰り返す方法を示します。
一度だけ表示する背景画像の方法
この例では、背景画像を一度だけ表示する方法を示します。
背景画像を配置する方法
この例では、ページ上に背景画像を配置する方法を示します。
パーセントで背景画像を定位する方法
この例では、ページ上で背景画像をパーセントで定位する方法を示します。
ピクセルで背景画像を定位する方法
この例では、ページ上で背景画像をピクセルで定位する方法を示します。
固定の背景画像の設定方法
この例では、固定の背景画像の設定方法を示します。画像はページの他の部分とともにスクロールしません。
すべての背景属性が1つの宣言で指定されています
この例では、すべての背景属性を一つの宣言で設定する方法を示しています。

CSS 背景属性

属性 説明
background ショートカット属性で、背景属性を一つの宣言で設定します。
background-attachment 背景画像が固定か、ページの残りとともにスクロールするかを設定します。
background-color 要素の背景色を設定します。
background-image 画像を背景に設定します。
background-position 背景画像の開始位置を設定します。
background-repeat 背景画像を設定し、どのように繰り返すかを設定します。