6.8 背景に関するプロパティ
CSSには、「背景」を指定するプロパティが色々あります。この中でもよく使用する3つを見ていきましょう。
1. background-colorプロパティ
背景色の変更には、background-colorプロパティを使用します。値には、背景色を指定します。指定方法には、RGBカラー、色名、16進数表現が使われますが、シャープ（#）で始まる16進数表現が広く使われています。
➢ background-colorプロパティの記述例
body {
background-color: #2c7a9b;
}
2. background-imageプロパティ
要素の背景は、背景色を変更するだけでなく画像を指定することもできます。要素の背景に画像を指定するには、background-imageプロパティを使用します。
➢ background-imageプロパティの書式
セレクタ {
background-image: url(画像のパス);
}
url()のカッコ内に記述する画像パスは、ダブルクォーテーション（"）などで囲まずに記述します。相対パスで記述する場合、HTMLファイルからではなく、CSSファイルからの相対パスを指定する必要があります。
➢ background-imageプロパティの記述例
.menu {
background-image: url(../img/dog.jpg);
}
3. background-repeatプロパティ
背景に指定した画像は、縦方向、横方向に繰り返すことができます。background-repeatプロパティを使用すると、背景の繰り返し方法を指定することができます。
| background-repeatの値 | 繰り返し結果 |
| background-repeat: repeat | 縦横に繰り返す |
| background-repeat: repeat-x | 横方向に繰り返す |
| background-repeat: repeat-y | 縦方向に繰り返す |
| background-repeat: no-repeat | 繰り返さない |
表 6.2.1 : borderプロパティの種類と値
スタイルを記述して実際の表示を確認しましょう。
①ソースフォルダ ：webpage/ch06
②ファイル名 ：background.html
➢ background.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景に関する プロパティ</title>
<style>
body {
background-color: #acd1f5;
background-image: url(../img/dog.jpg);
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>
background-repeatの値をrepeat-x、repeat-y、no-repeatに変えてそれぞれの表示を確認してみてください。
