2006年12月28日
背景補足
前回書いた、background:ですが、
実は一行で書けるわけは・・・
background-attachment:
background-color:
background-image:
background-position:
background-repeat:
などの複数の設定を一度に設定できる為です。
それぞれの指定できる値などは、
と言うぐあいです。
以上が組み合わさって、
background:#ff00ff url(/usr/honyara/sample.jpg) no-repeat top right fixed;
のように書ける訳ですね。
ただ、すでに書いてますが、領域の指定は、自動では画像に合うとは限らないので、
そのセレクタ中で別途指定しておいたほうが良いですね。
実は一行で書けるわけは・・・
background-attachment:
background-color:
background-image:
background-position:
background-repeat:
などの複数の設定を一度に設定できる為です。
それぞれの指定できる値などは、
background-attachment:背景画像の固定かスクロールの設定
fixed 背景画像固定
scroll 背景画像スクロール
background-color:背景色
#ffffff 色コード(RGB値)指定
colorname 色名での指定
transparent 透明、透過
background-image:背景画像の指定
none なし
url( ) URLでの指定
background-position:背景画像表示位置
実数値+ 単位 水平方向 垂直方向の順に基点から左からの距離、上からの距離
パーセント値 表示位置の割合と画像の位置の割合がそろう
上記二つの基点は、領域のパディング内の左上が基点となります。
以下は、キーワード
left 左寄せ
right 右寄せ
top 上寄せ
bottom 下寄せ
center 中央に・・
background-repeat:背景画像繰り返しの指定
repeat タイル状に縦横に
repeat-x 横方向反復
repeat-y 縦方向反復
no-repeat 繰り返しなし、単回表示
と言うぐあいです。
以上が組み合わさって、
background:#ff00ff url(/usr/honyara/sample.jpg) no-repeat top right fixed;
のように書ける訳ですね。
ただ、すでに書いてますが、領域の指定は、自動では画像に合うとは限らないので、
そのセレクタ中で別途指定しておいたほうが良いですね。