掲示板/スタイルシート質問板/過去ログ/一覧/ IEとFireFoxの両方で背景画像を固定する方法について。

0 名前： masa ： 2006/11/27（月） 13:46 ［URL］ ID:GWTUArPT

はじめまして！HPを真剣に作り始めて2ヶ月の初心者ですが、CSSと言うものがあると知り挑戦してみました。
とりあえず形は完成し、友人などに見てもらったのですが、FireFox（言われるまでIEしか知りませんでした・・・）で
崩れて見えると言われ現在修正中です。
<Div>内の背景画像がIEとfirefoxで表示のされ方が違ってしまいます。

【現在の状況】
background-attachment:fixed ;にするとIEでは意図した通りに表示されます。しかしFireFoxではスクロールはしませんが
とんでもない位置に配置されてしまいます。

background-attachment:fixed 50% 50%;にするとFireFoxでは意図どおりに表示されますが、IEでは固定されずスクロールしてしまいます。

【どうしたいのか】
<Div>内に背景画像を固定しIEとFireFoxで同じ位置に表示されるようにしたいと考えています。

javascriptでIEとそれ以外を別のCSSFileを読み込ませるという方法があるのかもしれませんが（？）、私にはそこまでの知識が
ありません。
出来ればCSSのみで解決したいです。

【何をしたのか】
netで色々調べシステム識別子<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">というのを入れてみました。

background-repeat : no-repeat ;
background-position : center center;（top left、50% 50%など色々試しました。）なども追加してみましたが変わりません。

問題の<Div>はwidth:800px height:420pxで背景画像も同じ800X420pxです。

スクロールの無いページではbackground-attachment:fixed 50% 50%;でIE、FireFox共に問題ありません。
（スクロールしないので当然ですが・・）

ちなみに現在足踏み中のページです。
http://nodoka0904.web.infoseek.co.jp/link/index.html

（趣味の写真のHPなので重いかも知れません）
【備考】
参考になるか分かりませんが、background-attachment:fixed ;の時FireFoxでの見え方（背景画像の表示位置）が私のPCと
友人のPCで異なるようです。（画面キャプチャをメールで送ってもらいました。）

色々検索してみましたが、煮詰まってしまいました。以下その部分のCSSソースを記述します。

.main_box {
　　　　margin-top: 0px;
　　　　margin-right: auto;
　　　　margin-bottom: 0px;
　　　　margin-left: auto;
　　　　width: 800px;
        height: 420px;
        background-color:#000000;
        background-image:url(images/kabegami,link.jpg);
        background-attachment:fixed ;
        background-repeat:no-repeat;
        overflow-x:hidden;
        overflow-y:scroll;
        scrollbar-face-color:#000000;　
　      scrollbar-3dlight-color:#000000;　
　      scrollbar-darkshadow-color:#000000;　
　      scrollbar-base-color:#000000;
　      scrollbar-arrow-color:#696969;
}

他にも問題は山済みですが、現在この件で足踏み状態です、アドバイスをいただければ幸いです。
初心者故の文章の稚拙をお許し下さい。宜しくお願いいたします。

1 名前：元帥： 2006/11/27（月） 13:46 ［URL］ ID:OpfHEHBu: IEのバグです。
通常はウインドウに対して背景画像は固定されるのですが、IEではどういうわけか、適用した要素に対して固定されてしまいます。

というか、要素と背景画像のサイズが同じなのに、固定する必要ってあるのでしょうか？
因みにbackground-attachmentは複数の値をとりません。

参考：
http://www.seo-equation.com/html/css/background-attachment

ブラウザは沢山あります。
IEならば、記事のUAの場所にカーソルを持って行けば、UAが表示される筈です。
誰がどういったものを使用しているのか参考になるでしょう。

あなたの知らないブラウザたち：
http://www.cyanworks.net/archives/browsers/

2 名前： masa ： 2006/11/27（月） 13:46 ［URL］ ID:GWTUArPT: 元帥様アドバイス感謝いたします。
私なりに解釈しBodyに
body {
　　　　text-align: center;
background-image:url(images/kabegami,link.jpg);
background-attachment:fixed ;
background-position:50% 146px;
background-repeat : no-repeat ;
}
のようにしてみました。
なんとかIEとFireFoxでほぼ同じ見え方にすることが出来ました。
ただネットスケープというブラウザではまた違うようです。
問題は山積みですがなんとかがんばってみようと思います。
また質問することがあるかもしれませんが（きっとします）
宜しくお願いいたします。