- ベストアンサー
WindowsのFirefoxでの背景画像の表示について
- WindowsのFirefoxで背景画像が表示されない原因について質問です。
- CSSで背景画像を下寄せにし、グラデーションとの馴染みを持たせたいですが、背景色しか表示されません。
- 他のブラウザでは上手くいくが、WindowsのFirefoxでは表示されない問題について相談したいです。
- CSS
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは もしかして<body>の中身何も無しで試していますか？ 表示はされてますがbody heightが0な為画面上部がposition:bottomになってます body { height:300px; } とかしてbodyに高さをつけたり中身を作ったりすると出てくると思いますよ もしくは <style type="text/css"> body { background-color: #826243; margin:0px; } #backimage { position:absolute; bottom:0px; width:100%; height:***px; background-image:url(img/site/bg.jpg); background-repeat:repeat-x; } </style> <div id="backimage"></div> ※heightは画像の高さ のようにするといいですよ ※この場合高さがブラウザより超えるとスクロール時に画像がついてこないので<div id="contents">などのようにしてcontentsをheight指定してoverflow:auto;するなどもう一工夫bodyコントロールが必要ですけど
その他の回答 (3)
- abril
- ベストアンサー率69% (388/560)
質問者様のソースをそのままコピーして適当な画像を使って表示してみました。 私の環境（Firefoxはver.2.0.0.12、OSはWindows XP）上ではbackground-imageを先に指定してbackground-colorを最後に指定しても何の問題もなく背景色の上に背景イメージが重なるのですが。 私は自分内ルールではbackgroundプロパティを一括指定する時は以下の様な順番で記述する様に統一していますが、それで質問者様のおっしゃる様な不具合が起きた記憶がありません。 body { background: url(../images/hogehoge.jpg) left bottom repeat-x #ccccff; } 背景画像が表示されないのは別の部分に問題があるのでは…？
- tenderfeel
- ベストアンサー率56% (215/379)
CSSは基本的に上に書いてあるものを下に書いてあるものが上書きするという動作をするので、 質問された書き方だと、最初に指定した背景イメージを 最後に指定した背景色で同じ位置のスタイルを上書きしているため、イメージが消えてしまったというわけです。 一括で指定しない場合も、一括指定するときと同じ順番で書けば問題はないと思います。
- syuga
- ベストアンサー率51% (19/37)
私も知らなかったのですが、Firefoxはbackgroundの書き方に規則？があるみたいですね。（参考URL参照） CSS表記を body { background: #826243 url(img/site/bg.jpg) repeat-x fixed left bottom; } とすることでこちらの環境では正しく表示できましたが、いかがでしょう？
