htmlで画像を背景にしたり前景にしたりする方法

項目の見出しに画像を重ねて表示する必要がある場面もあると思います。
「ちょっと使いたい」、「このページだけ例外的に使いたい」といった場合はCSSファイル等を設定して…とするよりも簡単な方法を紹介します。

　　　文字の上に画像を乗せる場合

↑のように文字の上に画像を置く場合はIMGタグにstyle=”position: absolute;”を追加します。
 
例：

<h2><img style="position: absolute;" src="http://*******/test01.png">　　　文字の上に画像を乗せる場合</h2>

通常、HTMLで画像を表示するとその分改行され、その下から次の処理になりますが、これを入れると改行されず、その場のまま、しかも画像の裏からになります。

　　　画像の上に文字を乗せる場合

このスタイルは画像を下へ配置し、文字を上に配置する事もできます。
 
例：

<span style="position: absolute;">こんな感じに
文字の方を上にする事も
できます。</span><img src='http://*****.png'>

こんな感じに
文字の方を上にする事も
できます。

　　　画像の上に画像を乗せる場合

もちろん、画像の上に画像を乗せる事もできます。
 
例：

<img style="position: absolute;" src="http://*****.png"><img src="http://*****.png">