背景関係
background-color、background-image、background-repeat、background-position、background-attachment、background
背景色を指定する
background-color:色指定
background-colorプロパティは、背景の色を指定します。値は、カラーコードや色名などで指定します。また、値に「transparent」を指定すると、背景が透明になって下の背景が透けて見えるようになります。ただ、ボックスのマージン（常に透明）には適用されません。
背景色を決める時は、前景色となる文字の色を考慮しておかなければ、文字が見えにくくなります。
| 値 | |
| カラーコードで指定 | #000000～#FFFFFF または#000～#FFF |
|---|---|
| 色名 | red（赤）、blue（青）など |
| 透明 | transparent |
■ サンプルコードと結果
CSS
<style type="text/css">
body { background-color:#ffccff;}
p { padding:10px;}
.type1 { background-color:yellow;}
.type2 { background-color:#9f0;}
.type3 { background-color:#99cfcf;}
</style>
HTML
<body>
<p class="type1">背景色1</p>
<p class="type2">背景色2</p>
<p class="type3">背景色3</p>
</body>
背景に画像を指定する
background-image:url(背景画像のパス)
background-imageプロパティは、背景の画像を指定します。背景色と同様に、ここで設定した画像はボックスのマージン（常に透明）には適用されません。環境によっては画像が表示されない場合もありますので、必ず背景色も同時に指定しておくと良いです。
また、background-repeatを一緒に指定していない場合は、指定した画像はボックス全面に繰り返し（タイル状に）表示されます。
| 値 | |
| 画像URL | 絶対パスまたは相対パスで指定 |
|---|---|
■ サンプルコードと結果
CSS
<style type="text/css">
body { background-image:url(orange.png);}
p { padding:15px;}
.type1 { background-image:url(red.png);
background-color:#fff;}
.type2 { background-image:url(green.png);
background-repeat:no-repeat;}
.type3 { background-image:url(blue.png);}
</style>
HTML
<body>
<p class="type1">背景画像1</p>
<p class="type2">背景画像2</p>
<p class="type3">背景画像3</p>
</body>
画像の並び方を指定する
background-repeat:並び方
background-repeatプロパティは、背景画像の並び方（繰り返し方法）を指定します。通常は、background-imageプロパティと同時に指定します。
| 値 | |
| 全面にタイル状に繰り返し表示（初期値） | repeat |
|---|---|
| 横方向のみ繰り返し表示 | repeat-x |
| 縦方向のみ繰り返し表示 | repeat-y |
| 繰り返さないで表示 | no-repeat |
■ サンプルコードと結果
CSS
<style type="text/css">
body { text-align:center;}
p { padding:15px;
background-image:url(back.png);
background-color:#fff;
border:1px solid #000; }
.type1 { background-repeat:repeat-x;}
.type2 { background-repeat:repeat-y;}
.type3 { background-repeat:no-repeat;}
</style>
HTML
<body>
<p class="type1">画像は横方向</p>
<p class="type2">画像は縦方向</p>
<p class="type3">画像は繰り返さない</p>
</body>
画像の表示位置を指定する
background-position:表示位置
background-positionプロパティは、背景画像が指定された場合の画像の表示位置を指定します。
単位付きの数値＋％で指定された場合は、横位置・縦位置の順に半角スペースで区切って指定します。値が一つしなかった場合は、横位置が指定されたことになり、その場合の縦位置は「50％」の位置になります。
単位付きの数値で指定した場合は、領域の左上から画像の左上までの距離を指定します。また、キーワードを値とした場合は、「left」、「top」は「0％」、「right」と「bottom」は「100％」、「center」は「50％」を指定した結果と同じとなります。これらは順不同で指定できますが、一つしか指定しなかったらもう片方は「center」になります。
| 値 | |
| キーワードで指定 | left（左）、right（右）、top（上）、bottom（下） |
|---|---|
| ボックスの左上からの位置を数値で指定 | px |
| ボックスの左からの位置を割合から指定 | % |
■ サンプルコードと結果
CSS
<style type="text/css">
body { text-align:center;}
p { padding:15px;
background-image:url(green.png);
background-repeat:no-repeat;
border:1px solid #000;}
.type1 { background-position:100% 0;}
.type2 { background-position:center center;}
.type3 { background-position:bottom left;}
</style>
HTML
<body>
<p class="type1">画像は右上</p>
<p class="type2">画像は中央</p>
<p class="type3">画像は左下</p>
</body>
背景画像を固定する
background-attachment:固定の可否
background-attachmentプロパティは、背景画像が指定された場合に、その画像をウィンドウの指定したその位置に固定するか、他の内容とともにスクロールさせるかを指定します。
| 値 | |
| 背景画像を固定 | fixed |
|---|---|
| スクロールと一緒に移動させる | scroll（初期値） |
■ サンプルコードと結果
CSS
<style type="text/css">
body { background-image:url(logo.png);
background-repeat:no-repeat;
background-position:left top;
background-attachment:fixed;}
h1,p { text-align:right;
line-height:2em;}
</style>
HTML
<body>
<h1>HTML5</h1>
<p>HTML5とCSS3は<br />いろいろなことが可能となりました。</p>
<p>このより斬新なデザイン作りが可能となったことで、<br />
よりデザイナーの創造力が<br />引き出せることになるでしょう</p>
</body>
スクロールバーを下に移動しても、左の背景画像は固定されて表示されます。
背景関係をまとめて指定する
background:背景関係のプロパティの値
backgroundプロパティは、背景関連のプロパティの値をまとめて指定します。必要な値を任意の順序で半角スペースで区切って指定します。複数の値をまとめて指定することによって、CSSの記述を減らすことができシンプルになる。
■ サンプルコードと結果
CSS
<style type="text/css">
body { text-align:center;}
p { padding:15px;
border:1px solid #000;}
.type1 { background:#ccffcc;}
.type2 { background:#fff url(back.png) top center no-repeat;}
</style>
HTML
<body>
<p class="type1">背景色のみ</p>
<p class="type2">画像を上中央に１つ</p>
</body>
【各CSSのプロパティ詳細6】