背景色をうまく使えない

背景画像が非透過なので背景が覆い隠されてしまいます。透過GIFで保存しましょう。 なお、このままではIEで印刷すると枠の右端が印刷されないはずです。印刷用スタイルシートを別に用意するのでなければ、body要素に上下左右のマージンを指定しておくと良い。 私ならこう書くでしょう。 @charset "Shift_JIS"; /* スタイルシート */ body{ margin : 0px; color: black; line-height: 1.4em; background: url("b_bcg030.gif") repeat-y red; } p{ text-indent: 1em; margin: 0.4em 2em; } h1{ } div#outline { background-color: lavender; margin: 10px 60px 20px 100px; /* 本文幅を固定するのはまずい。小さな画面の訪問者には横スクロールを強制することになるし、大きな画面の方には右が抜けた間抜けなページになる。*/ /* text-align: left; 初期値なので不要 */ border: 2px solid silver; padding: 0px; /* 5 5 5 5px という書き方はエラーになるはず */ } img{ border: none; clear: both; margin-top: 10px; margin-bottom: 10px; } img.left{ float: left; margin-right: 20px; } img.right{ float: right; margin-left: 20px; } hr{ visibility: hidden; clear: both; } HTMLのソースに誤りがあります。HTMLなら<br />ではなく、<br>です。（<br />はXHTMLでの空要素の記述方法です。）というより行間を空けるための連続<br>はブラウザによると無視されます。正しくは<p>段落</p>でマークアップし、段落間は上記例のようにp{margin:}で指定すべきです。 1) 背景画像を透明GIFで保存しなおす。(リング部分に同じ白があるので工夫が必要) 2) HTMLの<br><br />はすべて消して、改めて段落を<p></p>でマークアップ 3) せっかく画像にclass="left"などと指定してあるので、CSSにてfloatを設定するとHTMLソースのstyle指定は不要になる。 4) 画像のborderはCSSで0にすべきです。HTMLでは指定しない 5) 最後の</body>の直前に<hr>を入れておこう。CSSで不可視にする。 6) <div>が無意味に重複している。ひとつの<div>に指定可能です。 　<div id="outline" class="outline-marign"> 　これでHTMLもすっきりし、期待通りの表示になるはずです。