色と背景

色

color

前景色(文字の色)を指定します。

色

色を指定します。

p { color : red }
p { color : #FF0000 }
p { color : rgb(255,0,0) }

背景

background

背景関連のプロパティである、 background-color、 background-image、 background-repeat、 background-attachment および background-position を一度に指定できる簡略化プロパティです。

body { background : #FFFFFF }
P { background : #99CCFF url("back.gif") no-repeat center left scroll }

background-color

背景色を指定します。

transparent

透明です。

色

色を指定します。

body { background-color : white }
h1 { background-color : transparent }

background-image

背景画像を指定します。

背景画像は、background-color で指定した背景色の上に描画されます。 そのため、画像の透明部分には、背景色が透けて見えます。

none

背景画像を指定しません。

URI

背景画像として使用する画像ファイルの URI を指定します。

body { background-image : url(back.gif) }

background-repeat

背景画像を指定したときにその画像をどのように敷き詰めるかを指定します。

敷き詰めの開始位置は、background-position で指定します。

repeat

垂直、水平方向の両方に敷き詰めます。

repeat-x

水平方向にのみ敷き詰めます。

repeat-y

垂直方向にのみ敷き詰めます。

no-repeat

敷き詰めず、一枚だけ表示します。

body { background-image : url(back.gif) ; background-repeat : repeat-y }

/* 中央に一枚だけ表示 */
body { background-repeat : no-repeat; background-position : center }
/* 右端にのみ敷き詰める */
body { background-repeat: repeat-y; background-position : right }

background-attachment

背景画像を固定させるかスクロールさせるかを指定します。

scroll

背景画像は文書とともにスクロールされます。

fixed

背景画像を固定します。

body { background-image : url(back.gif) ; background-attachment : fixed }

background-position

背景画像が指定されている場合に、 画像の水平方向の位置と垂直方向の位置をスペースで区切って指定しています。

水平方向の位置を パーセント値 、 長さ 、 left ( 0% )、 center ( 50%)、 right ( 100% ) で指定し、 垂直方向の位置を パーセント値 、 長さ 、 top ( 0% )、 center ( 50%)、 bottom ( 100% ) で指定します。

長さやパーセント値が1つだけ指定した場合、その値は水平方向の配置に適用され、 垂直方向の値は「 50% 」になります。

center などのキーワードとパーセント値や長さを同時に指定することはできません。 つまり center 60% などの値は不正です。

/* background-image は省略しています。 */
body { background-position : 30% 30% }
body { background-position : 50px 50px }
body { background-position : top center } /* 0% 50% */
body { background-position : center } /* 50% 50% */
body { background-position : bottom } /* 50% 100% */