ホーム >>> HTML整理ノート

background-image 背景画像

要素の背景に画像を設定。子要素に継承しないが,既定値が「透過」なので見かけ上、画像がそのまま表示される。
背景画像と背景色の両方を指定した場合、背景色の上に背景画像が重ねて配置される。

書式
 background-image:none ・・・(初期値)背景画像を設定しない
 background-image:url(画像ファイルの絶対/相対パスを指定)
            (「絶対/相対パス」についてはここを参照)

Sample

DIV要素内にP要素をおき、P要素内に EM要素、U要素を入れる。それらに背景画像を設定

ブロック要素/インライン要素にかかわらず全ての要素の背景に画像を設定できる。
下は水平線<hr>に背景画像をつけたもの。


マーキーですこのmarqueeにも背景画像を設定

Scriptプロパティ <backgroundImage>

下のボタンを押せば上のDIVの背景を変更できます

Sample Source......................................................................>>>

<div id="dv" style="background-image : url(../../images/bg/bgimg01.gif);
 border-width:1px;border-style : solid;border-color:navy;width:400px;height:120px;">
 <p style="font-size:140%;background-image : url(../../images/bg/tairu1.gif)
  ;margin-top:5mm;margin-left : 5mm;margin-right : 5mm;margin-bottom : 5mm;">
  DIV要素内にP要素をおき、
  P要素内に<em style="background-image : url(../../images/bg/wallppr067.gif);">
  EM要素、U要素</em>を入れる。それらに
  <u style="background-image : url(../../images/bg/tairu2.gif);">背景画像を設定</u></p>
</div>

<hr style="background-image : url(../../images/anime/anistar.gif)
            ;width:300px;height:20px">
<p>マーキーです<marquee direction="right" border="1" 
  style="background-image : url(../../images/bg/niji.jpg);width:80%;height:16px;">
    このmarqueeにも背景画像を設定</marquee></p>
<button onclick="dv.style.backgroundImage = 'url(../../images/bg/tairu1.gif)'";>
    背景1</button>
<button onclick="dv.style.backgroundImage = 'url(../../images/bg/tairu2.gif)'";>
    背景2</button>
<button onclick="dv.style.backgroundImage = 'url(../../images/bg/wallppr067.gif)'";>
    背景3</button>
<button onclick="dv.style.backgroundImage = 'url(../../images/bg/bgimg01.gif)'";>
    元に戻す</button>
<button onclick="dv.style.backgroundImage = 'none'";>背景画像を無くす</button>