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

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

段落の背景も画像です。

HTML&CSS
<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>
 

スポンサード・リンク