PR

構文

background-image : 画像;

説明文

 「background-image」では,指定した要素の背景に表示する画像を指定する。ボックス要素の場合は,要素の内容が表示される領域と,Padding領域の範囲が背景として扱われ,Margin領域は背景として扱われない。

 画像の指定には「url("画像ファイル名")」として指定する。例えば,imagesディレクトリに保存されているbackground.jpgを背景として利用する場合は,以下のように指定する。

background-image : url("images/background.jpg");

 また,「none」を指定すると画像の表示は行わず,背後の要素や背景が透き通って表示される。

[画像のクリックで拡大表示]

使用例

● CSSの定義

body  { background-image : url('bgimage.jpg'); }
div { background-image : url('divbgimg.gif');
      padding : 5px; }

● HTMLの例

<h1>背景に画像を設定する</h1>
<p>背景に画像を設定する場合は,スタイルシートの「background-image」に画
像を指定します。例えば,photo.jpg画像を全体の背景に利用したい場合は以下の
ようにスタイルシートを指定します。</p>
<div> body {background-image : url( 'photo.jpg' );}</div>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

関連項目