CSSでWebページの背景画像を指定する

　カスケーディングスタイルシート（CSS）を用いると、背景画像をいろいろな用途でセンスよく活用することが可能になる。CSSを利用すれば、ただ単にページ全体の壁紙として表示するだけでなく、背景画像をCSSのあらゆるルールに割り当てることも可能なのである。本稿では、動的で視覚的に美しいページを作成するためにウェブデザイナが背景画像を活用する方法の中で、もっとも有名なものを3つ紹介しよう。

　Compuserveの時代を思い出してみよう。当時、ウェブページの背景画像が与える効果は限定的だった。ブラウザは背景画像をHTML文書全体の背景としてしか表示させることができず、デフォルトでは利用者のブラウザのサイズに合わせて画面上に無限に敷き詰められるように表示されていたのである。この機能は興味深いものであったが、ウェブが「趣味で利用されるよく分からないもの」から企業の情報伝達手段として変化を遂げていく中で、それほど歓迎されるものではなかった。

　しかし、CSSが登場したことでそのような日々は遠い過去のものとなってしまったのである。

　本稿（原文）は、TechRepublicのダウンロードページからPDFとしても入手可能である。PDFには、例として用いた画像やHTMLのコードも含まれている。

グラデーション

　まず始めに、図1の4つの画像をハードディスクにダウンロードして欲しい。

　注意：これらの画像は、これから作成を行うウェブページと同じディレクトリに保存するよう注意して欲しい。そうしないと、HTMLを表示しても画像は表示されない。

図1：これら4枚の画像を、HTMLを保存するディレクトリと同じディレクトリに保存する。