■ background-color
背景色の指定 <color> transparent
body,table,div,a など全ての要素の背景に色を付けます。
background-color:#0080ff
body 以外は基本的に背景が透明になっています。その body の背景も透明にするのが transparent です。
transparent を使う事でインラインフレームで表示したHTMLの背景を、
インラインフレームを埋め込んだHTMLの背景で表示する事が出来ます。
1.インラインフレームで表示するHTMLの body を transparent を使って透明化する。
2.インラインフレームのタグに allowTransparency="true" を入れる。
body {background-color:transparent}
<iframe allowTransparency="true" src="***.html">
■ background-image
背景画像(壁紙)の指定 <url()> none
body,table,div,a など全ての要素の背景に画像を指定します。
background-image:url(image/b_xline.gif)
背景画像を指定しない場合は background-image を使わない、画像のパスを書かない、none を入れるかになります。
しかし background-image:none これは余り使われません。
■ background-repeat
背景画像の貼り方の指定 repeat no-repeat repeat-x repeat-y
背景画像はノーマルで並べて表示されます。
それを 横方向だけ・縦方向だけ・繰り返して表示しない、を指定する事が出来ます。
background-repeat:repeat
background-repeat を指定しなくても
これと同じように並べて表示される。
|
background-repeat:no-repeat
任意の場所に繰り返さず表示したい
写真などの壁紙で使われる。
|
background-repeat:repeat-x
上部や下部の横に並べて表示する
壁紙で使われる。
|
background-repeat:repeat-y
左側や右側の縦に並べて表示する
背景画像で使われる。
|
■ background-attachment
背景画像の固定 scroll fixed
スクロールバーをスクロールしても壁紙をスクロールしたくない場合に使います。
background-attachment:scroll
|
background-attachment:fixed
|
background-position との併用は、ネットスケープとオペラで背景画像が正しく表示されなくなります。
■ background-position
背景画像の配置を長さでの指定
左上の位置を 0 0 として壁紙を好みの位置に配置する事が出来ます。単位には幾つかありますが px がおすすめです。
background-position:50px 30px
背景画像の配置をパーセンテージで指定 %
% による配置は覚えやすいのでおすすめです。
background-position:0% 100%
背景画像の配置をキーワードで指定 top bottom left center right
キーワードは、縦方向を上から top center bottom 横方向を左から left center right で指定する事が出来ます。
background-position:bottom right
壁紙の配置の多くは、
縦方向で 上top・真中center・下bottom、横方向で 左left・真中center・右 right に
配置するのがほとんどなので、このキーワードでの配置は良く使われます。
また background-position を使い配置した場合、background-repeat:no-repeat と background-attachment:fixed を
一緒に使うのが一般的ですが、ネットスケープとオペラで背景が表示されなくなります。
例えばbody の壁紙を右下に配置するなら下のようになります。
<style type="text/css">
<!--
body
{
background-image:url(****.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-attachment:fixed;
}
-->
</style>
■ background
背景に関する一括指定
上で紹介した background に関するスタイルシートを一括で指定する事が出来ます。
background-color:#ffffff;
background-image:url(****.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-attachment:fixed;
例えば上のような記述は下のように記述する事も出来ます。
background:#ffffff url(****.jpg) no-repeat top right fixed
background は font のように、省略できないものや、値を書き込む順番もありませんので、
覚えやすく使いやすいです。
|