■壁紙素材の使い方

Home

<STYLE type="text/css">
<!--
body {
background-color:#ffffff;
background-image:url(素材画像のURL);
background-repeat:no-repeat;
background-attachment:fixed;
}
--></STYLE>

これを<HEAD>〜</HEAD>の間に入れます。

background-color:#ffffff;
この例ではページ全体の背景色を白(#ffffff)を指定してあります。
カラーコードによって適当な背景色を指定することができます。
ページの背景色を指定しておかないと、閲覧する側の環境により異なる背景色で表示される場合もあります。

background-repeat:no-repeat;
この一行によってページに背景画像がひとつだけ表示されます。
この場合はページの左上に固定表示されます。

background-attachment:fixed;
この一行によってページをスクロールしても背景全体は固定されたままになります。
背景を固定しない場合はこの行はいりません。

中央に画像を固定する場合
background-repeat:no-repeat; の後に
background-position:center; を加えます。

<STYLE type="text/css">
<!--
body {
background-color:#ffffff;
background-image:url(素材画像のURL);
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
}
--></STYLE>


右下に画像を固定したい場合は
background-repeat:no-repeat; 
の後に
background-position:right bottom; を加えます。

左下に画像を固定したい場合は
background-repeat:no-repeat; 
の後に
background-position:left bottom; を加えます。

右上に画像を固定したい場合は
background-repeat:no-repeat; の後に
background-position:right top; を加えます。


他にもpositionの指定で、さまざまな位置に背景画像を固定することが可能です。

ただし、閲覧する側のブラウザの種類によって意図したものに表示されない場合もあります。

詳細については、CSSに関する専門の書籍や解説サイトを参照してください。