このbackground属性は背景の色、背景画像、背景画像の固定、背景画像の繰り返し、背景画像の表示位置を一括で指定できる属性です。
並び方には特にルールはなく、指定しなくてもいい背景系の値は省略できます、省略されたものは初期値で設定されます。背景色と背景画像は画像が優先され、画像を表示できない場合、背景色が適用されます。
必ず属性値の間には半角スペースを入れて分けることも重要。
背景系の属性を覚えてしまえば背景系はこの属性を指定するだけでいいでしょう。
セレクタ{
background:#ffffff url(gazou.gif) fixed no-repeat 70% 60%;
}
bodyセレクタ指定されています、background-position属性と同じ値だが一行で宣言できてしまう。
| 値 | 概要 |
|---|---|
| #RGB | #000000等の１６進数で２桁ずつ宣言し、細かく設定できる |
| #RRGGBB | #000000等の１６進数で１桁ずつ宣言し、設定できる |
| rgb(R,G,B) | 色を１０進数で指定する |
| rgb(R%,G%,B%) | 色を％で指定する、この場合は文字を赤色にする |
| red | 色名で指定する、この場合は文字を赤色にする |
| transparent | 背景を透明にする（初期値） |
| 値 | 概要 |
|---|---|
| url(gazou.gif) | （）内を絶対パスか相対パスで背景画像を指定 |
| none | 背景画像を指定しない |
| 値 | 概要 |
|---|---|
| fixed | 背景画像を固定する |
| scroll | 背景画像を固定しない |
| 値 | 概要 |
|---|---|
| repeat | 背景画像を縦、横に繰り返す |
| repeat-x | 背景画像を横に繰り返す |
| repeat-y | 背景画像を縦に繰り返す |
| no-repeat | 背景画像を繰り返さない |
| 値 | 概要 |
|---|---|
| % | 左からの位置と上からの位置を％で指定 |
| px | 左からの位置と上からの位置をピクセルで指定 |
| center | 背景画像を中央に置く |
| top | 背景画像を上に置く |
| right | 背景画像を右に置く |
| bottom | 背景画像を下に置く |
| left | 背景画像を左に置く |
※１：ＮＮでは対応していません。
何行も書き込む必要がないため非常に便利です。