Firefoxでbackground-repeatが表示されない

質問

contentボックスの中に
sideとmainを配置した後
contentの背景にy軸にリピートして
メニュー用の画像を表示させようとしたのですが
画像が表示されずうまくいきません。
検索してclearfixで回避できるような感じのものを見つけたので
とりあえず追加してみたのですが駄目でした。
うまく表示させる方法を教えてください。

#content {
width: 800px;
border: #333333;
margin: auto;
background-image: url(img/aaa.jpg);
background-repeat: repeat-y;
}
#side {
float:left;
width: 200px;
margin-right: 10px;
}
#main {
float:left;
width: 570px;
padding-right: 0px;
}
.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 */

回答No.1

leap_day · ベストアンサー

こんにちは

clearfixは使用したことが無いので分かりませんが

<style type="text/css"><!--
#content {
width: 800px;
border: 1px solid #333333;
margin: auto;
background-image: url(img/aaa.jpg);
background-repeat: repeat-y;
}
#side {
float:left;
width: 200px;
height:500px;
margin-right: 10px;
}
#main {
float:left;
width: 570px;
padding-right: 0px;
}
--></style>

<div id="content">
<div id="side">side</div>
<div id="main">main</div>
<div style="clear:both;"></div>
<div>

ってことですよね？（#sideのheightは分かりやすくする為に付け加えているだけです）
違うのは#contentのborderのみです(線の太さと線種がいります）

ほとんどそのままですが表示されているみたいですね（side部分に縦並びに画像が表示)
画像のパスや名前はあっていますか？違ってたら何も表示されていませんでした

お礼

leap_dayさん
ご回答ありがとうございます。
<div style="clear:both;"></div>をつけてませんでした
うまく表示されましたありがとうございましたｍ(＿＿)ｍ