流れる背景
まずは、下記の例をご覧下さい。
※文字しか見えない場合は、画像が読み込まれるまでしばらく待って下さい。(画像は 55KB あります。)
背景がアニメーションしております。 右から左へと流れているのがお分かりになると思います。 ← ← ← |
背景画像がアニメーションしているのがお分かりになると思います。
これは一体どうやっているのでしょうか?
ただそれだけのこと
実は特殊なテクニックは一切使っていません。 ただ、アニメーションGIF画像を背景画像(壁紙)として指定しているだけです。実に簡単ですね。
アニメーションする壁紙画像素材を探してきて(もしくは自分で作成して)、あとは通常の壁紙と同様の方法で、壁紙として指定するだけです。
今回は、次のようなアニメーションGIF画像を使いました。
背景に壁紙画像を指定するには?
HTMLで背景に画像を指定する方法をご紹介しておきます。
※補足※(2010年6月追記)
以下では、HTMLで背景画像を指定する記述方法をご紹介しています。
しかし、背景画像の指定は、HTMLではなくスタイルシートを用いる方が望ましいです。 スタイルシートを用いて背景画像を指定する方法については、記事「CSSで背景画像の表示方法を自在に指定」などをご参照下さい。
■ページ全体の背景として壁紙を指定する場合:
<body background="pagewall.gif">
HTMLファイル中の <body> タグに、「 background 」属性を加えて、画像ファイル名を指定します。
■table要素で作った枠内の背景に壁紙を指定する場合:
<table> <tr> <td background="cellwall.gif">(中身)</td> </tr> </table>
table要素でセルを構成するtd要素(<td>タグ)に「background」属性を加えて、画像ファイル名を指定します。
おわりに
アニメーションGIF画像の存在はご存じだったと思いますが、それを背景画像に指定することも可能だということは、気付かなかった方々も多いのではないでしょうか?ぜひ、みなさんも試してみて下さい。
【関連記事】