背景画像を変更しよう
ページ全体やヘッダー部など各部の背景画像変更はスタイルシートで行います。「スタイルシートの編集方法」のとおり、スタイルシート編集ページを開いてください。
- 使用する画像ファイルは、公開サーバーに転送しておく必要があります。（「画像を挿入しよう」参照）画像ファイルの指定は「url(画像ファイル・パス)」のように記述します。画像ファイル・パスは、スタイルシート・ファイルがあるディレクトリからの相対パスか、http:// からはじまる絶対パスで指定します。
- 背景画像は、「background-image: url(background.gif);」のように指定します。 ページ全体の背景画像を変更する場合は、「body」タグに背景画像を指定しますので、次のように編集してください。
body
{
...
background-image: url(img/background.gif);
background-repeat: repeat;
background-position: left top;
...
} - ヘッダー部の背景画像を変更する場合は、次のように編集してください。
#headerこの例では、背景画像を1回だけ表示するように設定しています。背景画像に合わせてヘッダー部をサイズ変更する場合は、「サイズを変更しよう」を参照してください。
{
...
background-image: url(img/header.gif);
background-repeat: no-repeat;
background-position: left top;
...
}
↓動画による背景画像変更の例です。クリックで再生されます。