| プロパティ | 値 | 意味 |
|---|---|---|
| background-color | 色の指定 | 背景色を設定 |
この段落の背景には #ddccff という色がついています。
この段落の背景は，rgba(100,255,50,0.7) という設定がしてあります．
この段落の背景は，rgba(100,255,50,0.3) という設定がしてあります．
| プロパティ | 値 | 意味 |
|---|---|---|
| background-image | url("画像のＵＲＬ")[,url("第２画像のURL"),…] | 背景にしたい画像ファイル名を，スタイルを記述したファイルからの相対的なＵＲＬで指定する． 複数の画像を使用する場合は，カンマで区切って記述する． |
| none | 画像を貼らない |
複数の背景画像を指定し，背景画像のそれぞれに別々のスタイルを設定するには，指定したいスタイルの値をカンマで区切って「順に指定します．
この段落には、背景として椛が表示されてます。
| プロパティ | 値 | 意味 |
|---|---|---|
| background-attachment | fixed | 背景を表示している窓に固定 |
| local | 背景を設定したHTML要素の内容に固定 | |
| scroll | 背景を設定したHTML要素に固定（内容がスクロールしても背景は固定）（既定値） |
| プロパティ | 値 | 意味 |
|---|---|---|
| background-size | contain | 縦横比を保った画像全体が領域に収まる最大の大きさで表示． |
| cover | 縦横比を保った画像１つで領域全体を覆うように表示 | |
| [数値＋単位 | 数値＋％ | auto ] | 表示する背景画像の幅を設定 | |
| A B | A：背景画像の幅，B:高さ．上記と同様に設定． |
| contain を指定 | cover を指定 | auto 80px を指定 | 100% 100% を指定 |
| プロパティ | 値 | 意味 |
|---|---|---|
| background-origin | border-box | 境界線の左上を始点に背景を表示 |
| padding-box | 境界線の内側の領域の左上を始点に背景画像を表示 | |
| content-box | 内容を表示する領域の左上を始点に背景を表示 |
border-box
padding-box
content-box
| プロパティ | 値 | 意味 |
|---|---|---|
| background-clip | border-box | 境界線を含む領域に背景を表示 |
| padding-box | 境界線の内側の領域に背景画像を表示 | |
| content-box | 内容を表示する領域に背景を表示 |
border-box
padding-box
content-box
| プロパティ | 値 | 意味 |
|---|---|---|
| background-position | ［数値＋単位｜数値＋％］ | 領域の左端からの水平距離．垂直は中央． |
| left, center, right | 左端、中央、右端を指定．垂直は中央． | |
| top,center,bottom | 上端、中央、下端を指定．水平は中央． | |
| A B | A：水平方向の設定，B：垂直方向の設定．指定する値は上記と同様． | |
| Ａ Ｂ | A：水平位置を［left｜right］［数値＋単位｜数値＋％］， B：垂直位置を［top｜bottom］［数値＋単位｜数値＋％］のように設定 |
| プロパティ | 値 | 意味 |
|---|---|---|
| background-repeat | repeat | 縦・横ともに繰り返して表示し、背景に画像を敷き詰める |
| repeat-x | 横方向にだけ繰り返して表示する | |
| repeat-y | 縦方向にだけ繰り返して表示する | |
| space | 丁度敷き詰められるように画像の間隔を調整する | |
| round | 丁度敷き詰められるように画像のサイズを調整する | |
| no-repeat | 繰り返さずに一度だけ表示する |
| プロパティ | 値 |
|---|---|
| background | Ａ Ｂ Ｃ Ｄ Ｅ F G H |
A，B，C，D，E，F，G，H にはそれぞれ以下のプロパティーに対する値をスペースで区切って設定する．初期値のままの設定で良いプロパティーの値は空白で良い．
| Ａ | Ｂ | Ｃ | Ｄ | Ｅ | F | G | H |
|---|---|---|---|---|---|---|---|
| background-image | background-repeat | background-attachment | background-position | background-clip | background-origin | background-size | background-color |
また，複数の画像に設定する場合は，画像ごとに一連の設定ををカンマで区切って並べる．最初に設定した画像が一番上に，最後に設定した画像が一番下に表示される．