- 締切済み
背景画像の指定方法
少し調べたのですが、さっぱり原因が分からない為質問させていただきます。 外部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の方だと、長い本文をスクロールしていった最後に、背景画像が表示される状態です。 分かりにくい説明かもしれませんが、アドバイスよろしくお願い致します。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- goulan
- ベストアンサー率46% (23/50)
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のユーザーが一番多いのは分かっていますが、とりあえず目を瞑ってしまおうかと思います^^; この度はアドバイスありがとうございました。
- goulan
- ベストアンサー率46% (23/50)
ソースで見る限り、それはIE6のバグです。 IE6(5, 5.5も。）は、 body, html 以外の要素に background-attachment: fixed; を指定すると、その要素に対して固定されてしまい、思ったとおりの表示をすることが出来ません。 どうしてもというならば、javascriptの力を借りて下さい。背景画像を表示させるscriptをnet上で見掛けた記憶があります。多分まだあるでしょう。
お礼
少し試すのに時間がかかりそうなので、取り急ぎお礼だけ述べさせて頂きます。回答ありがとうございました！
お礼
今回の場合、説明が足りなくて申し訳ないのですが、bodyで既に背景画像使用しているんです。 なので、DIVじゃなくてTable背景でも良かったのですが、どちらにせよIE6では難しいようでした。 回答ありがとうございました。