背景イメージの重ね表示

質問

こんにちは。
MTを使ってテンプレートを作っているのですが、サイドバー全体の背景の上に、別な背景を表示させようとしています。

例えば以下のようなかんじです。

<style type="text/css">
.bg {
　background-position: left;
　background-repeat: repeat-y;
　background: url("./img/bg.gif");
}
.fg {
　padding-bottom: 100px;
　background-position: bottom;
　background-repeat: no-repeat;
　background-image: url("./img/fg.gif");
}
</style>
　　　　　　：
　　　　　　：
<!-- ▼サイドバー▼ -->
<div class="bg">
　　<div class="fg">
　　　　　　：
　　　　　　：
　　</div>
</div>
<!-- ▲サイドバー▲ -->

IE だと全体の背景が前面にでてしまい、ホントは前面に表示されて欲しい別な背景が消されてしまい困っています。※Firefox などでは問題ない。
サイドバー全体の背景の上に別な背景を表示させたい場合には、どのようにすればいいのか教えください。
よろしくお願いします。

回答No.1

noname#19206 · ベストアンサー

画像の大きさなんかの細かい情報もあればいいんだけど、
とりあえず適当な画像を中てて試してみた結果以下で正常に表示されました。
bo.gif を 201x108,gf.gif を 165x165 の画像でそれぞれ試しています。
まぁ、細かい数値は適宜でお願いします。

<style type="text/css">
.bg {
width:200px;height:100%;
background-position: left;
background-repeat: repeat-y;
background: url("./img/bg.gif");
}
.fg {
width:200px;height:300px;
background-position: 0px 100px;
background-repeat: no-repeat;
background-image: url("./img/fg.gif");
}
</style>

お礼

さっそくの回答ありがとうございます。
width:100%; と指定したら IE でも表示されるようになりました。

Firefox では表示されて IE で表示されなかったので、またかぁ…なんて思っていたのですが、サイズを指定すれば良かったんですね。

ありがとうございました。