レイアウトをデザインする
背景に色を指定する
ここで使うプロパティ
background-color
背景に色をつける
CSS（スタイルシート）でbackground-colorで背景を指定すれば、<div>の中を好きな色にすることができます。
色の指定方法は複数あるのですが、＃（シャープ）と6ケタの英数字で表す１６進数で指定する方法とカラーネームで指定する方法が一般的です。
今回はbox-4（footer）に黄緑を指定しましょう。
黄緑の色のコードは#9acd32になります。
これをbackgroundで指定すると
background-color:#9acd32となります。
背景に画像を指定する
ここで使うプロパティ
background-image: url(' フォルダ名/ファイル名 ')
背景に画像をつける
まずは背景に指定する画像を用意しましょう。基本的に背景を指定したい場所のサイズ（width）に合わせて画像を用意します。
今回の画像は、box-1のdivタグの大きさ（width: 800px)に合わせて、横800px の画像を用意しています。
もちろん自分のホームページを作成する時は自分オリジナルの画像を載せた方がいいのですが、これは練習ですので用意してあるサンプルを使ってもかまいせん！！（いまいちですけど（笑）
サンプル→ top-sanpuru
「右クリック ＋ 対象をファイルに保存」でダウンロードできます。
ホームページ ソース
XHTML(HTML)
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=shift_jis" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="body">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
</div>
</body>
</html>
CSS（スタイルシート）
#body {
width :800px ;
border: 1px solid #9acd32;
}
width :800px ;
border: 1px solid #9acd32;
}
#box-1 {
border-bottom: 1px solid #9acd32;
background-image: url("img/top.png");
}
border-bottom: 1px solid #9acd32;
background-image: url("img/top.png");
}
#box-2 {
float : left;
width :200px;
}
float : left;
width :200px;
}
#box-3 {
float : right;
width :600px;
}
float : right;
width :600px;
}
#box-4 {
clear: both;
width: 800px;
background-color : #9acd32;
}
clear: both;
width: 800px;
background-color : #9acd32;
}