HOME >> スタイルシート > 背景に画像を指定する

　背景に画像を指定する

■	background-image:

指定できる値

URL

画像ファイルのアドレス

キーワード

none 背景に画像を使わない

背景に画像を指定するには、background-imageプロパティを使います。
HTMLでも、<BODY>タグの中にbackground属性をつけて背景に画像を使うことが出来ましたが、このプロパティも前で説明した、background-colorプロパティと同じように、見出しや段落などいろいろな所に画像を張り込むことが出来ます。
値には、まずurlの文字を記入し、その後ろのカッコ内に画像ファイルのアドレスを相対パス（gazou/sky.gif)か絶対パス（http://～/sky.gif)で指定します。

スタイルシートファイルをつかって、背景画像の設定する場合は、HTMLファイルからではなくてスタイルシートファイルを基準にして、画像のアドレス（URL)を記入します。なお、NNでは、HTMLファイルを基準にしてしまいます。
それと、フォームのテキストエリア（<TEXTAREA>)にこのプロパティを指定した場合、Netscape Navigator4.7では画像が表示されないだけではなく、入力欄自体も表示されませんので注意して下さいね。

サンプル - Microsoft Internet Explorer

見出しの背景も画像です。

段落の背景も画像です。

ソース

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
BODY { background-image:url(a.gif); }
H1   { background-image:url(b.gif); }
P    { background-image:url(c.gif); }
-->
</STYLE>
</HEAD>
<BODY>
<H1>見出しの背景も画像です。</H1>
<P>段落の背景も画像です。</P>
</BODY>
</HTML>

HOME >>スタイルシート

次のページ >>