背景画像の指定方法

質問

少し調べたのですが、さっぱり原因が分からない為質問させていただきます。
外部CSSで背景画像を指定しているのですが、WinXP IE7で作製した所うまくいったのですが、別のマシン（WinXP IE6）で見ると表示の仕方が変わってきます。

参考ソース▼
【外部CSS】-----
.bg { width:300px;
background-image:url(bg.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position: bottom;}

【HTML】-----
<div class="bg">長い本文</div>

IE7だと、開いているウィンドウサイズに合わせて、見ている画面範囲の下部に背景画像が来るのですが、IE6の方だと、長い本文をスクロールしていった最後に、背景画像が表示される状態です。

分かりにくい説明かもしれませんが、アドバイスよろしくお願い致します。

回答No.3

noname#66720

ただ画面の下のほうに固定したいだけなら
html {
background:url(bg.png) no-repeat fixed bottom;
}

でいいんじゃないでしょうか？divも必要ありません。
ただ、IEhは6以上じゃないとhtmlに対してbackgroundの指定は無効なようなので、5.xは切り捨てることになりますが。

お礼

今回の場合、説明が足りなくて申し訳ないのですが、bodyで既に背景画像使用しているんです。
なので、DIVじゃなくてTable背景でも良かったのですが、どちらにせよIE6では難しいようでした。
回答ありがとうございました。

回答No.2

goulan

No.1です。捕捉。

以前使っていた方法があります。お試しください。ただ、どのブラウザでも同じようにレンダリングされるとは限りません。

.bg{
background-image: url(bg.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0% 100%;
}

<div class="bg">
<div style=" height: ***px; overflow: auto;">
長い本文
</div>
</div>

height を指定（もちろん画像のサイズ（height）よりも高くしないと、文章の下部にfixed の表示は無理です）、iframeのように見せかけます。長い本文はそのheightにはいりきりませんので、overflow を指定します。auto ではなく、scrollでも良いです。その場合と、width を指定する場合は、横スクロールも出たりします。表示させたい幅に調整してください。

お礼

参考に、試してみました。なるほど、iframeのようになるのですね・・・今回はデザイン的に崩れるので見送りますが、今後の参考にさせていただきます。
javascriptにての方法、探してみましたがいまいちよく分かりませんでした。ですが、IE6のバグだという事が分かっただけで良かったです。
IE7のユーザーも徐々に増えてきている事かと思うので、IE6のユーザーが一番多いのは分かっていますが、とりあえず目を瞑ってしまおうかと思います^^;
この度はアドバイスありがとうございました。

回答No.1

goulan

ソースで見る限り、それはIE6のバグです。
IE6(5, 5.5も。）は、 body, html 以外の要素に background-attachment: fixed; を指定すると、その要素に対して固定されてしまい、思ったとおりの表示をすることが出来ません。

どうしてもというならば、javascriptの力を借りて下さい。背景画像を表示させるscriptをnet上で見掛けた記憶があります。多分まだあるでしょう。

お礼

少し試すのに時間がかかりそうなので、取り急ぎお礼だけ述べさせて頂きます。回答ありがとうございました！