CSSの背景特性は、要素の背景の影響を定義するために使用されます。
CSSの背景のプロパティ：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
背景色
background-colorプロパティは要素の背景色を指定します。
ページの背景色は次のように設定されています：
CSSで、色は、ほとんどの場合で指定します。
- 以下のような-有効な色名"red"
- HEX値-のような"#ff0000"
- RGB値-のような"rgb(255,0,0)"
見CSSカラー値の可能な色の値の完全なリストについて。
以下の例では、 <h1>, <p>と<div>要素は、異なる背景色を持っています：
例
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
} »それを自分で試してみてください 背景画像
background-imageプロパティは要素の背景として使用するイメージを指定します。
それは素子全体を覆うように、デフォルトでは、画像が繰り返されます。
ページの背景画像は、次のように設定することができます。
以下のテキストおよび背景画像の悪い組合せの一例です。 テキストが非常に読みにくいです。
 | 注：背景画像を使用する場合は、テキストを乱さない画像を使用しています。 |
|---|
背景画像 - 水平または垂直に繰り返し、
デフォルトでは、 background-imageプロパティは、水平方向と垂直方向の両方の画像を繰り返します。
一部の画像のみを水平または垂直に繰り返されるべきである、またはそれらは、このように、奇妙になります。
上の画像は、（水平方向だけ繰り返された場合background-repeat: repeat-x;背景が良くなります。
| 注：画像の縦方向に設定繰り返すにはbackground-repeat: repeat-y; |
|---|
背景画像 - セット位置と無リピート
一度だけ、背景画像を表示することによっても指定されているbackground-repeatプロパティ：
上記の例では、背景画像、テキストと同じ場所に示されています。 我々は、それがテキストをあまり妨害しないように、画像の位置を変更します。
画像の位置は、以下によって指定されているbackground-positionプロパティ：
例
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
»それを自分で試してみてください 背景画像 - 固定位置
（ページの残りの部分と一緒にスクロールしません）背景画像を固定する必要があることを指定するには、使用するbackground-attachmentプロパティを：
例
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
»それを自分で試してみてください 背景 - 速記プロパティ
コードを短くするためには、一つのプロパティにすべてのバックグラウンドのプロパティを指定することも可能です。 これは簡略記述特性と呼ばれています。
背景の短縮形プロパティですbackground ：
簡略記述特性を使用する場合は、プロパティ値の順序は次のとおりです。
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position
プロパティ値のいずれかが欠落している場合には、長い間、他のものがこの順序であるように、問題ではありません。
練習で自分自身をテスト！
すべてのCSSの背景のプロパティ
| プロパティ | 説明 |
|---|---|
| background | 1宣言内のすべてのバックグラウンドのプロパティを設定します。 |
| background-attachment | 背景画像は、ページの残りの部分に固定またはスクロールされているかどうかを設定します |
| background-color | 要素の背景色を設定します |
| background-image | 要素の背景画像を設定します。 |
| background-position | 背景画像の開始位置を設定します。 |
| background-repeat | 背景画像が繰り返される方法を設定します |