HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


背景に画像を表示する

CSSの書き方

background-image:url (画像のURI) ;

CSSの詳細情報
プロパティ名 background-image 読み方 バックグラウンド・イメージ
初期値 none 意味 背景画像の挿入
背景画像へのパス
対象 すべての要素
CSSレベル CSSレベル1 対応ブラウザ Windows MAC
継承 しない IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

「background-image」プロパティは、ページや要素に背景を表示するスタイルシートです。値には「url(背景として使用する画像への絶対または相対パス)」を記述します。

相対パスについて

ここで指定する画像へのパスですが、相対パスで記述する場合の基準ディレクトリに注意してください。外部CSSファイルを読み込んでいる場合は、外部CSSファイルが格納されるディレクトリになります。

一方、ページに直接「background-image」プロパティを指定している場合はそのページが格納されているディレクトリが基準となります。

繰り返し表示について

「background-image」プロパティで設定された画像は、ブラウザによって横方向と縦方向に繰り返して表示されます。繰り返しの仕方を指定するには、別途「background-repeat」プロパティで行います。また、繰り返しの開始位置や、画像の表示位置については「background-position」プロパティで行います。

背景色も同時に設定できる?

できます。背景色の設定は「background-color」プロパティで可能ですが、この「background-color」プロパティと「background-image」プロパティを同時に設定することもできます。

同時に設定した場合は、「background-image」プロパティが優先されて表示されます。ただし、背景画像に透過処理をした画像(透過GIFなど)を使用していた場合は、透過部分に背景色が透過されて表示されます。

CSS/HTMLサンプル

body { background-image:url(../img/bg.gif); }

BODY要素に背景画像を指定 サンプル