ホームページを自作しよう　≪JoyWave便利箱≫ 背景画像を一部に表示する

■実際にどうなるの？

上端に表示
左端に表示
右端に表示
下端に表示

それぞれクリックしてください。次の画面で表示します。

■ソース
上端に表示
<style type="text/css">
<!--
body {background-image:url('../gazou/c004bcg.gif'); background-repeat:repeat-x; background-attachment:fixed}
-->
</style>

左端に表示
<style type="text/css">
<!--
body {background-image:url('../gazou/c004bcg.gif'); background-repeat:repeat-y; background-attachment:fixed}
-->
</style>

右端に表示
<style type="text/css">
<!--
body {background-image:url('../gazou/c004bcg.gif'); background-repeat:repeat-y; background-position: right; background-attachment:fixed}
-->
</style>

下端に表示
<style type="text/css">
<!--
body {background-image:url('../gazou/c004bcg.gif'); background-repeat:repeat-x; background-position: bottom; background-attachment:fixed}
-->
</style>

■どうするの？
<head>〜</head>間に書き込みます。
４つのソースから１つを選んでください。
スタイルシートではなく、ソース・タグでページ全体を指定する方法は壁紙（背景）を固定するをご覧ください。
url('../gazou/c004bcg.gif') 貼り付けたい背景画像ＵＲＬを書き込みます。
background-repeat:repeat-x; 背景画像の繰り返し方法を指定できます。
「 repeat 」・・・縦横に繰り返します。（これが初期値です）
「 repeat-x 」・・・横方向のみに繰り返します。
「 repeat-y 」・・・縦方向のみに繰り返します。
「 no-repeat 」・・・画像を１回だけ表示して繰り返しません。
background-position: right; 背景画像の表示位置を指定します。
左右の位置・・・「 left 」「 center 」「 right 」
上下の位置・・・「 top 」「 center 」「 bottom 」
background-repeat:no-repeat とセットにします。
これらは組み合わせることができ、
例えば「中央上のみ表示」したいときには
background-repeat:repeat-x;
background-position:center top;
と半角スペースを入れて書きます。
background-attachment:fixed この命令は「壁紙固定」の意味です。
左端や右端で固定しなくてもいい場合は削除してください。



実際に利用されて「これは良かった」内容がありましたら、教えてください。
少しずつ充実させていき、本当の意味での「便利箱」にしたいと思います。
Copyright© 2005 JoyWave. All rights reserved.