みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

WindowsのFirefoxでの背景画像の表示(CSS)

WindowsのFirefox(Ver.2.0.0.12)での背景画像の表示について質問です。
下記の様なCSSで、下寄せでX方向に画像を並べ、グラデーションで背景色と馴染むようなデザインにしたいのですが、背景色しか表示されません。
他のブラウザでは上手くいくのですが、原因がわかりません。
Dreamweaverで作っております。

body {
background-image: url(img/site/bg.jpg);
background-repeat: repeat-x;
background-position:bottom;
background-color: #826243;
}

どなたかご教授いただけませんでしょうか。
宜しくお願いいたします。

投稿日時 - 2008-02-20 12:06:55

QNo.3792871

すぐに回答ほしいです

質問者が選んだベストアンサー

こんにちは

もしかして<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コントロールが必要ですけど

投稿日時 - 2008-02-23 23:09:33

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.3

質問者様のソースをそのままコピーして適当な画像を使って表示してみました。
私の環境(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;
}

背景画像が表示されないのは別の部分に問題があるのでは…?

投稿日時 - 2008-02-22 16:23:18

ANo.2

CSSは基本的に上に書いてあるものを下に書いてあるものが上書きするという動作をするので、
質問された書き方だと、最初に指定した背景イメージを
最後に指定した背景色で同じ位置のスタイルを上書きしているため、イメージが消えてしまったというわけです。

一括で指定しない場合も、一括指定するときと同じ順番で書けば問題はないと思います。

投稿日時 - 2008-02-21 22:16:46

ANo.1

私も知らなかったのですが、Firefoxはbackgroundの書き方に規則?があるみたいですね。(参考URL参照)

CSS表記を

body {
background: #826243 url(img/site/bg.jpg) repeat-x fixed left bottom;
}

とすることでこちらの環境では正しく表示できましたが、いかがでしょう?

参考URL:http://pico.g.hatena.ne.jp/chepooka/20070309/1173439449

投稿日時 - 2008-02-20 12:55:45

あなたにオススメの質問