CSS backgroundが反映されない件

質問

CSSレイアウトで問題にぶつかってしまいました。
http://www.vivibond.com/demo/test/test.html
上記URLをFirFoxで見ると#contentsに書いた
「background: url(images/bg2.gif) repeat-y;」が反映されません。

いったい何故でしょうか。。。
CSSはこんな感じです。
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
body {
background: #FFFFFF;
margin: 0px;
padding: 0px;
font: 12px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
}
/*font*/
.pink {color:#F26E71;}
/*ページ全体ラッパー*/
#wapper {
margin: 0px;
padding: 0px;
width: 850px;
}
#wapper1 {
margin: 0px;
padding: 0px;
width: 850px;
background: url(images/bg.jpg) repeat-y;
}
/*コンテンツ*/
#contents {
margin: 0px;
padding: 0px;
width: 800px;
height: auto;
clear: both;
background: url(images/bg2.gif) repeat-y;
}
/*ナビ*/
#navi {
background: #F3EDEE url(images/b_bg.jpg) no-repeat;
padding: 44px 44px 150px 42px;
width: 160px;
float: left;
}
.navibox1{
height: 52px;
background: url(images/naviboxbg.gif) no-repeat bottom;
width: auto;
}
.navibox2{
height: 52px;
width: auto;
}
#main {
margin: 0px;
padding: 0px;
float: right;
width: 554px;
}
.image {
margin: 0px;
padding: 20px 34px 20px 20px;
}
.topics {
margin: 0px 34px 0px 20px;
padding: 0px;
}
.about_text {
margin: 0px 30px 0px 24px;
padding: 0px 5px 30px 10px;
line-height: 20px;
}
/*フッター*/
#footer {
margin: 0px;
background: url(images/footer.jpg) no-repeat;
text-align: justify;
clear: both;
padding: 30px 0px 30px 470px;
}
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
よろしくお願いいたします。

回答No.4

grumpy_the_dwarf · ベストアンサー

contentsの直下にはnaviとmainしかなくて、両方ともfloatしている
のだから高さは0。高さが0では背景画像がどうとかいう余地はあり
ません。どこでもいいからfloatで検索すると、山のように出てくる
話です。

高さを指定するとか、section02の後で<br clear="all" />すると
か、#middle_inside:after で見えないコンテンツを置くとか、でな
けりゃoverflow属性を指定するとか、いろんなごまかし方がありま
すので、好みのものをどうぞ。私は :afterで見えないスペースを置
くのが好きです。

お礼

ご回答いただきありがとうございます。
いろいろごまかす方法があるのですね。
<div style="clear:both"></div>をかませてみたら解決できました。
ありがとうございました。

回答No.3

himajin100000

http://www.mozilla.gr.jp/standards/webtips0021.html
http://archiva.jp/web/html-css/clearfix.html
http://redline.hippy.jp/lab/css/floatoverflow.php

contents内の要素(navi,main)を段組にするためにfloatプロパティを用いているが，これによりGeckoやOperaではこれらの高さがcontentsの高さに反映されなくなったため、ここの高さは「ほぼ0」だ。
したがって背景画像も高さが0になるまで繰り返される(=表示されない)ため

お礼

ご回答いただきありがとうございます。
なるほどです。
ありがとうございました。

回答No.2

noname#127257

ざっくりとしか見てませんが、何となく、div の階層が深すぎて
ブラウザが処理しきれないのかな、という気がします。

htmlのほうで #navi の範囲を丸ごと消しても、
#contents の背景は表示されないので、
#navi の部分が原因ではない、と勝手に予想しました。

他のdiv の階層を、一つ一つ隠して見ると、
<div id="#main"> と、それに対応する
</div> を隠したとき、背景が表示されました。

別の箇所も削ってたかも知れないので、
正確なところは分かりません。

スクリプト部分やタグやCSSを削って、
ソースをシンプルにして動作確認をされると、
どの時点でダメになるのか、原因が掴めるかも知れません。

お礼

ご回答いただきありがとうございます。
今後もいろいろと壁にぶつかることもあると思うので、
少しずつ削ってチェックするようにしてみます。
ありがとうございました。

回答No.1

glphon

#wrapper1の「background: url(images/bg.jpg) repeat-y;」も反映していませんね。
　どちらも#naviの下ですね。
　私には力不足ゆえに分からずですが。

お礼

見ていただきありがとうございました。