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

point 背景に画像を指定する

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
ホーム(H)メニュー(M)戻る(B)進む(N)

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

段落の背景も画像です。

ソース
<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> 
Copyright ©2001〜2011 まさぼ〜 All Right Reserved