| カラーコード / サイトについて / リンク集 / お問い合わせ |
|
|
|
→ 背景色を指定する
|
背景色を指定する
background-colorプロパティで背景色を指定することができます。ほとんどの要素に使用することができ、値には前に説明した色の指定方法のどれかを指定します。
<div style="background-color : #AAEEDD">背景色を指定してます。</div>
-表示結果-
背景色を指定してます。 背景画像を指定する
background-imageプロパティで要素の背景画像を指定することができます。値にはurl()の形で指定します。textarea要素やform要素など様々な要素に指定することができます。
<textarea style="
background-image : url(../img/sample.gif)" cols="50" rows="4">背景色を指定してます。</textarea> -表示結果-
背景画像の繰り返しを指定する
background-repeatプロパティを使って背景画像の繰り返し方を指定できます。値にはrepeat-x repeat-y no-repeatのどれかを指定します。
repeat-xを指定した場合は、縦方向のみに、repeat-yの場合は横方向のみに配置します。no-repeatの場合は、１つだけ画像が表示されます。
<body style="
background-image : url(../img/sample.gif); background-repeat : repeat-y "> -表示結果-
表示結果はコチラです。
背景画像の位置を指定する
background-positionプロパティで背景画像の表示位置を指定することができます。
値は横方向の位置、縦方向の位置の順番で指定し、横方向の場合は、left center right 0%などの割合指定のどれかを指定します。
縦方向の位置には、top middle bottom 0%などの割合指定のどれかを指定します。
<body style="
background-image : url(../img/sample.gif); background-repeat : no-repeat; background-position : center center "> -表示結果-
表示結果はコチラです。
スクロールさせるか指定する
background-attachmentプロパティで、スクロールをしたときに、背景画像をどうするか指定することができます。
背景画像を固定（スクロールしても位置が変わらない）するには、値にfixedと記述します。
背景画像をまとめて指定する
backgroundプロパティで、これまでに説明した背景関連のスタイルをまとめて指定することができます。
body { background : #00FF22
url(../img/sample.gif) no-repeat fixed center center } |
 |