• ベストアンサー
  • すぐに回答を!

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

  • 質問No.3792871
  • 閲覧数472
  • ありがとう数1
  • 気になる数0
  • 回答数4
  • コメント数0
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;
}

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

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

  • 回答No.4
  • ベストアンサー

ベストアンサー率 60% (338/561)

こんにちは

もしかして<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件)

  • 回答No.3

ベストアンサー率 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;
}

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

ベストアンサー率 56% (215/379)

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

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

ベストアンサー率 51% (19/37)

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

CSS表記を

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

とすることでこちらの環境では正しく表示できましたが、いかがでしょう?
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ