スタイルシート講座〜背景編
それでは背景編行って見ましょう。
まず色の指定ですが、
background-colorを使います。
ここではpタグに色を指定してみましょう。
ＨＥＡＤ宣言：
<style type="text/css">
P.class1 {background-color:blue;}
P.class2 {background-color:red;}
<style>
ＢＯＤＹ宣言：
<p class="class1">背景色を変えてみました。</p>
<p class="class2">背景色を変えてみました。</p>
背景色を変えてみました。
背景色を変えてみました。
次は画像を埋め込みます。
background-image:url();を使います。
ＨＥＡＤ宣言：
<style type="text/css">
P.class3 {background-image:url("bg1d03.gif");}
P.class4 {background-image:url("bg2b01.gif");}
<style>
ＢＯＤＹ宣言：
<p class="class3">背景画像を変えてみました。</p>
<p class="class4">背景画像を変えてみました。</p>
背景画像を変えてみました。
背景画像を変えてみました。
次は背景画像の固定です。これはスクロールしても画像を固定しておくものです。
実行例はこのページです。
スクロールすると画像が固定されているのが分かります。
この宣言はbodyに宣言します。
ＨＥＡＤ宣言：
<style type="text/css">
body {background-attachment:fixed;background-image:url("bg1d04.gif");}
<style>
ＢＯＤＹ宣言：
なし。
実行結果：
このページ。
最後は背景の位置の指定です。
background-positionで指定します。
指定の仕方はいくつかあり、％やｐｘ、ｐｔさらに
top,center,bottom,left,rightとあります。
ここではその後にbackground-repeatを指定しています。
これは
repeat 画面いっぱいに表示
repeat-x 横方向に表示
repeat-y 縦方向に表示
no-repeat 繰り返しなし
です。
ＨＥＡＤ宣言：
<style type="text/css">
P.class5 {background-image:url("bg1d03.gif");background-position:300px 10pt;background-repeat:no-repeat;}
P.class6 {background-image:url("bg2b01.gif");background-position:50% 50%;background-repeat:no-repeat;}
<style>
ＢＯＤＹ宣言：
<p class="class5">背景画像を埋め込んでみました。</p>
<p class="class6">背景画像を埋め込んでみました。</p>
背景画像を埋め込んでみました。
背景画像を埋め込んでみました。
背景画像を埋め込んでみました。
背景画像を埋め込んでみました。
背景画像を埋め込んでみました。
背景画像を埋め込んでみました。
背景画像を埋め込んでみました。
背景画像を埋め込んでみました。
背景画像を埋め込んでみました。
背景画像を埋め込んでみました。
