Background

ここでは背景設定について簡単ながらもご説明を。
ほとんどの方は知っている基本的事項やもしれませんが、あまり詳しく知らない方は参考にしてやってください。

Lecture



上にあるタグはインラインフレームNo.001のstyle.cssの一部です。
基本的に background という文字は背景設定を表しています。
background の後に色々と書かれていてわからないとは思いますが、今からちょこちょこ説明します…!

画像URL



上にあるハート画像さんを使って簡単に説明してきますね。

background-image:url(画像URL);

画像URLという部分に画像アドレスをいれることで画像が表示されます。
けどこの方法だと…、



上の画像のように画面全面に敷き詰められてしまいます。
次から画像の表示設定を説明します。

リピート設定

background-image:url(画像URL);
background-repeat:リピート設定;

リピート設定という部分にリピート方法を入れてください。
リピート方法として、

background-repeat:no-repeat;  リピートなし
background-repeat:repeat-x;   横にリピート
background-repeat:repeat-y;   縦にリピート

が、あるのですが、それだけだとわかりにくいと思うので、画像で説明!



と、なります。これでわかりましたかね…?

画像の位置

次は位置設定になります。
何も設定しなければ、左上を基準として設定されています。

background-image:url(画像URL);
background-repeat:リピート設定;
background-position:位置設定;

位置設定という部分に好きな位置を設定してください。
位置設定の書き方として、

background-position:left top;      左上
background-position:left bottom;   左下
background-position:right top;     右上
background-position:right bottom;  右下

がありますが、これまたわかりにくだろうと思うので、実際の画像を見てみましょう!



*上記画像は全てリピート設定として background-repeat:no-repeat; に設定しています。


上の方法が一番わかりやすく簡単に設定出来るのですが、細かい位置設定が出来ません。
なので、次にちょっと難しいのですが、細かく位置設定出来る方法を伝授します!




上の画像をみてください。
左上を0%として、右にいく or 下にいくほど数値が上がっていきます。
なので、数値で設定すると、

background-position:0% 0%;      左上
background-position:0% 100%;     左下
background-position:100% 0%;     右上
background-position:100% 100%;   右下

上のようになります。
先に横の位置の数字設定、次に縦の位置設定の数字が基本ですので。
これまた、画像で表すと、





こんな感じになります。
*上記画像は全てリピート設定として background-repeat:no-repeat; に設定しています。

画像の固定方法

次に、画像固定方法を説明します。

この画面の右下にもハート画像があると思いますが、スクロールバーを動かしても常に右下にいますよね。
これは、「スクロールーバーに関係なく右下に固定」と設定しているのです。

background-image:url(画像URL);
background-repeat:リピート設定;
background-position:位置設定;
background-attachment:画像固定設定;

background-attachment:scroll;    画像位置変動
background-attachment:fixed;    画像位置固定

このページは background-attachment:fixed; に設定しています。
基本的に何も設定していなければ、background-attachment:scroll; で設定されちゃいますので。

背景色

次は、画像の表示設定ではないのですが、背景色設定の説明!

background-color:色設定;

と、なります。
色設定部分に好きなカラーコードいれちゃってくだされば、背景色つきますんで。

これまた、設定しなければ基本的に白色になりますので。

まとめ

今までの説明をまとめると、このページの背景設定は、

background-color:#ffffff;
background-image:url(bg01.gif);
background-repeat:no-repeat;
background-position:100% 100%;
background-attachment:fixed;

と、なっていることになります。
……、けど、これだと長々書いていてわかりにくい…!つか、書くのめんどくさい!!


というわけで、まとめて書く方法を説明します。

background:#ffffff url(bg01.gif) no-repeat 100% 100% fixed;

と、簡単にまとめることが可能なのです。
書く順番は決まっているのかいないのか定かではないのですが……、私は基本的に、背景色→画像URL→リピート設定→位置設定→画像固定設定 の順番で書くように統一してます。

んで、別に全ての設定書く必要ないので!
今回の場合は、別に背景色設定する必要ないので、

background:url(bg01.gif) no-repeat 100% 100% fixed;

こんな感じで、背景色飛ばしたり、他の設定飛ばすのも可能です。

Last...

背景設定はこんなもんですね。
全てに言えることですが、このページ見てるだけだとわからないことも多いと思うので、実際に自分でタグ書いて試してみてください!