流れる背景

まずは、下記の例をご覧下さい。
※文字しか見えない場合は、画像が読み込まれるまでしばらく待って下さい。(画像は 55KB あります。)


背景がアニメーションしております。

右から左へと流れているのがお分かりになると思います。

← ← ←

背景画像がアニメーションしているのがお分かりになると思います。
これは一体どうやっているのでしょうか?

ただそれだけのこと

実は特殊なテクニックは一切使っていません。 ただ、アニメーションGIF画像を背景画像(壁紙)として指定しているだけです。実に簡単ですね。

アニメーションする壁紙画像素材を探してきて(もしくは自分で作成して)、あとは通常の壁紙と同様の方法で、壁紙として指定するだけです。

今回は、次のようなアニメーション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画像の存在はご存じだったと思いますが、それを背景画像に指定することも可能だということは、気付かなかった方々も多いのではないでしょうか?ぜひ、みなさんも試してみて下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。