文章の背景画像を指定する

HTML言語を使用して表示する ホームページやブログなどのウェブサイトでは、ブロックタグやインラインタグで括られた文章などの領域の背景に、画像を指定することができます。

<タグ名style="background-image:url(背景画像URL)">背景色を指定する文章</タグ名>
  1. タグ名:P や DIV、SPAN タグなどが一般的ですが、ほとんとのブロックタグおよびインラインタグが使用可能です。
  2. 背景画像URL:背景画像URLを相対パスまたは絶対パスで指定します。URLは、'(シングルクォート)または ”(ダブルクォート)で括っても構いません。

サンプルソースです。

背景画像の指定<br>
インラインタグを使えば、
<span style="background-image:url(sample/bgimg.jpg)">部分的に背景画像を指定することが できます。 </span><br>
<div style="background-image:url(sample/bgimg.jpg)">
段落タグなどのブロックタグの場合、InternetExploreでは
背景画像が表示可能最大幅いっぱいに表示されますが、
Netscape では、文字を囲む最小の四角形に背景画像が適用されます。
</div>

このソースを表示すると、次のようになります。

背景画像の指定
インラインタグを使えば、 部分的に背景画像を指定することが できます。
段落タグなどのブロックタグの場合、文字を囲む最小の四角形に背景画像が適用されます。

InternetExplorer や Netscape といった主要ブラウザでは問題なく表示されますが、背景画像を指定する際には、background-image をサポートしていないブラウザでも見映えを損なわないように、同時に近似色の背景色も指定しておくと良いでしょう。

サポートしていない場合に、代わりに表示されます。

背景色の指定方法はこちら

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
フィールド指定して文章を枠で囲む
文字や文章、画像の行揃えを指定する
文章や文字、画像を囲む枠の太さ、色、種類をまとめて指定する
文章や文字、画像を囲む枠の種類を指定する
文字や文章、画像を囲む枠の色を指定する
文章や文字、画像を枠で囲む
マージンとパディングの違い
余白を入れる(パディング)
余白を入れる(マージン)
改行する/改行を禁止する
文章の背景色、背景画像、配置方法をまとめて指定する
文字や文章、テーブルなどの背景画像の位置を指定する
文章の背景に画像を固定表示する
文章の背景に指定した画像を繰返し表示する
段落文章の横幅を指定する
文章の行間隔を指定する
文章の背景画像を指定する
文章の背景色を指定する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス