ホームページ作成ガイド

背景画像の表示を指定する-中央

<HTML>
<HEAD>
<TITLE>背景画像の表示を指定する</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>
<BODY>

</BODY>
</HTML>

背景画像を中央に設定するスタイルシートです。
どんなウィンドウサイズになっても、スクロールバーを操作しても、必ずページの中央に配置されます。

<HEAD></HEAD>内にスタイルシートを記述します。

▼background-image
背景画像へのパスを記述します。

▼background-repeat
背景画像の並べ方を指定します。
background-repeat: repeat; 縦横にタイル状に並べる
background-repeat: repeat-x; 横方向にのみ繰り返す
background-repeat: repeat-y; 縦方向にのみ繰り返す
background-repeat: no-repeat; 繰り返さずひとつだけ表示

▼background-position: left bottom
背景画像の表示位置を指定します。
background-position: left bottom; 左下に配置
background-position: center center; 中央に配置
background-position: 10px 150px; 左10px、上150pxの位置に配置
background-position: 30% 40%; 左30％、上40％の位置に配置

▼background-attachment
背景画像のスクロールを制御します。何も指定しなければscrollになります。
background-attachment: fixed; スクロールしない
background-attachment: scroll; スクロールする

以上のプロパティをいろいろ組み合わせて使ってみてください。いくつか例を挙げておきます。

例１）左端に並べる
background-image: url(img.gif);
background-repeat: repeat-y;
background-position: left top

例２）右下にだけ表示
background-image: url(img.gif);
background-repeat: no-repeat;
background-position: right bottom