背景のうち,背景色に関しては 1.4 で述べた。ここからは,背景色について復習しながら,他の背景に関するプロパティを見ていこう。
background-color
プロパティ background-color
プロパティ に関しては Chapter 1 で解説した。ここでは,背景色と,ここまで解説したボックスの各部分との関係を復習しておく。
背景色は,ボックスの枠を含めた内側に適用される。具体的には,要素の内容の部分,パディング部分,そして枠の部分(ただし,枠のスタイルが dotted
,dashed
または double
のときに枠線の間に背景が適用され,枠の色が transparent
のときに枠が透過して背景色が見えるという形になる)。マージンの部分には背景色は適用されず,つねに背景色が“透過”に指定されているのと同じになる。
background-image
プロパティ CSS では,あらゆる要素に背景色を適用させることができるが,背景画像も同様にあらゆる要素に適用できる。背景画像を指定するのは,bakground-image
プロパティである。
background-image: url(
URI);
background-image: none;
このプロパティは,
none
である。
url(...)
のかっこ内に与えるのは,背景画像の URI である。URI は,単一引用符「'
」または二重引用符「"
」でくくってもよい(ただし,URI がかっこを含む場合には引用符でくくらなくればならない。また,URI が引用符を含む場合でも,区別できるように引用符でくくる必要がある)。URI 相対指定する場合は,その宣言が書かれている URI が基準になる(たとえば,その宣言が書かれているファイルが A,その宣言を B というファイルで(LINK
要素などで)呼び出している場合でも,基準となる URI は A となる)。
URI で指定された画像が読み込めれば,その画像は背景色に重ねられる(背景画像が透過 GIF ならば,透過色の部分は背景色になる)。画像が読み込めなければ,画像を表示せずにそのまま処理を続ける(このような場合も考えられるので,背景画像がない場合でも支障のないように背景色を指定しておく必要があるだろう)。
キーワード none
を指定した場合は,背景画像は指定されない。
背景画像の例を見てみよう。
H3 { border-bottom: 2px solid #960; padding: 0.3em; }
P { padding: 0.3em; background-image: url(f_bg_blk.gif); background-color: #FFF; /* 画像が読めないときのために,画像に似た色合いを背景色として指定しておく */ }
<H3>DHCP(動的ホスト構成プロトコル)</H3>
<P>DHCP(動的ホスト構成プロトコル)は,クライアントの IP アドレスなどの情報を,DHCP サーバから供給するものである。これによって,“Ethernet のコネクタを差し込むだけで”インターネットへの接続が可能になっている。</P>
DHCP(動的ホスト構成プロトコル)は,クライアントの IP アドレスなどの情報を,DHCP サーバから供給するものである。これによって,“Ethernet のコネクタを差し込むだけで”インターネットへの接続が可能になっている。
background-attachment
プロパティ background-attachment
プロパティは,背景画像を視点(ここではブラウザのウィンドウとみてよい)に対して固定するか,それとも視点にあわせてスクロールさせるかを指定する。
background-attachment:
キーワード;
このプロパティは,
scroll
である。
キーワードは,次のいずれかを与える。
scroll
fixed
このプロパティは,fixed
を指定しても scroll
として処理するブラウザもある。また,HTML の HTML
および BODY
要素にのみ fixed
の指定が有効になるブラウザもある。
backgropund-image
プロパティの例を書き換えて,background-attachment
プロパティの挙動をみてみよう。
H3 { border-bottom: 2px solid #960; padding: 0.3em; }
TEXTAREA { padding: 0.3em; background-image: url(f_bg_blk.gif); background-color: #FFF; }
#bg_scroll { background-attachment: scroll; }
#bg_fixed { background-attachment: fixed; }
<H3>DHCP(動的ホスト構成プロトコル)</H3>
<P><TEXTAREA COLS="60" ROWS="2" ID="bg_scroll">DHCP(動的ホスト構成プロトコル)は,クライアントの IP アドレスなどの情報を,DHCP サーバから供給するものである。これによって,“Ethernet のコネクタを差し込むだけで”インターネットへの接続が可能になっている。</TEXTAREA>
<BR>
<TEXTAREA COLS="60" ROWS="2" ID="bg_fixed">DHCP(動的ホスト構成プロトコル)は,クライアントの IP アドレスなどの情報を,DHCP サーバから供給するものである。これによって,“Ethernet のコネクタを差し込むだけで”インターネットへの接続が可能になっている。</TEXTAREA></P>
background-attchment
プロパティのキーワード fixed
は,(HTML においては)BODY
(HTML
)要素でのみしか有効にならない。