親ボックス内でfloatを解除しなかった場合、背景画像が表示されない、或いは親ボックスの下まで表示されない場合などに有効だが、基本的には親ボックス内でfloatを解除した方がbetter。

<div id="box">
<div id="box-a"></div>
<div id="box-b"></div>
</div>
---- CSS ----
#box { width: 700px; margin: 0 auto; background: #******; }
#box-a { width: 500px; float: left; }
#box-b { width: 200px; float: right; }

<div id="box" class="clearfix">
<div id="box-a"></div>
<div id="box-b"></div>
</div>
---- CSS ----
#box { width: 700px; margin: 0 auto; background: #******; }

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

 .clearfix { display: inline-block; } /* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
 .clearfix { display: block; } /* End hide from IE-mac */

#box-a { width: 500px; float: left; }
#box-b { width: 200px; float: right; }

参考：Clearing a float container without source markup

和訳：構造のマークアップなしでフロートをクリアする方法

とても参考になる記事：clearfixの決定版を作る －モダンブラウザ編－

background-positionサンプル

横方向
.sample{
background-image: url(sample.jpg);
background-repeat: repaet-x;
background-position: left top;
(background-position: 0 0;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-x;
background-position: left center;
(background-position: 0 50%;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-x;
background-position: left bottom;
(background-position: 0 100%;)
}

縦方向
.sample{
background-image: url(sample.jpg);
background-repeat: repaet-y;
background-position: left top;
(background-position: 0 0;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-y;
background-position: center top;
(background-position: 50% 0;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-y;
background-position: right top;
(background-position: 100% 0;)
}
など

[px]を使えばさらに細かな指定可能。

repeat(繰り返し)

repeat-x(横方向に繰り返し)

repeat-y(縦方向に繰り返し)

no-repeat(繰り返しなし)

background-repeatサンプル

background-positionを参照

background-image指定サンプル

.sample{ background-image: url(sample.jpg); }

.sample{ background-image: url(images/sample.jpg); }

.sample{ background-image: url(../images/sample.jpg); }

.sample{ background-image: url(http://www.sample.jp/images/sample.jpg); }など

background-color指定サンプル

p{ background-color: red; }

p{ background-color: #f00; }

p{ background-color: #ff0000; }など

サンプル