• 締切済み

IE,Firefoxでbodyの背景画像が表示されません。

IE8とFirefox3.0で、 cssでbodyに入れている background-image、background-colorがどちらも適用されません。 Sleipnir2.8.5ではきちんと表示されます。 ですので、htmlはあっているかと思います。 一通り、タグぬけがないかとかも、調べてみましたが、 特にないようです。 いろいろ調べてみましたが、わかりません。 hasLayout対策とかも試してみました。 (width や position をいれるなど) 下記がbodyのcssです。 body { color: #333; text-align: center; font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; background-color: #FFFF66; background-image: url("img/bg.jpg"); background-position: center top; background-repeat: repeat-y; margin: 0px; } 教えていただけると、 大変助かります。 よろしくお願いいたします。

みんなの回答

  • notnot
  • ベストアンサー率47% (4848/10262)
回答No.3

htmlファイルとcssファイルが別ディレクトリではありませんか? cssのurl()で相対パス指定をすると、cssファイルを起点とした相対パスになりますが、合ってますか?

magimo
質問者

お礼

回答ありがとうございます。 ディレクトリは合っていました。 うーむ。

magimo
質問者

補足

解決しました! 外部CSSからbodyとcontainerを抜き出して 内部に貼り付けたら、きちんと表示されました。 なぜなのか、意味がわかりませんが、 とにかく解決しました。 ありがとうございます。

  • a3453a
  • ベストアンサー率28% (132/460)
回答No.2

img/bg.jpgファイル等が別のフォルダ-に 入ってしまっているかもしれません(サーバー内で) あとは サーバー能力が弱くてバック画面を持ってくるまでの 時間がかかりすぎているかも。

magimo
質問者

お礼

さっそくの回答ありがとうございます。 サーバーを調べたところ、フォルダに画像は 入っていました。 サーバーとIEの相性がわるいのでしょうかね?

magimo
質問者

補足

解決しました! 外部CSSからbodyとcontainerを抜き出して 内部に貼り付けたら、きちんと表示されました。 なぜなのか、意味がわかりませんが、 とにかく解決しました。 ありがとうございます。

  • mdp36
  • ベストアンサー率72% (26/36)
回答No.1

Firefox3.5とIE8で試したところ動作しました。 FirebugやIE8の開発者ツールで調査すれば何かわかるのではないでしょうか。

magimo
質問者

お礼

開発者ツールですか。 私にとって、新しい発想ですね。 ちょっと、調べてみます! ありがとうございます。

magimo
質問者

補足

解決しました! 外部CSSからbodyとcontainerを抜き出して 内部に貼り付けたら、きちんと表示されました。 なぜなのか、意味がわかりませんが、 とにかく解決しました。 ありがとうございます。

関連するQ&A

  • bodyから左右に15pxずつ背景画像をのばしたい

    cssの基本設定ですが、 背景色をひき、さらにbodyから左右に15pxずつ背景画像をのばしたい という設定を試みていますがうまくいかずご教授いただけたらと思い書き込みさせていただきました。 背景色が #9999cc これを全面に表示し 背景画像を width 800pxで作り下にリピート そしてbodyが width 770pxの #ffffffの白色です。 そして cssで記述して表示してみたところ safaiではきちんと表示されるのですが、firefoxではbodyの幅までしか背景画像が表示されていません。 bodyから左右に15pxずつ背景画像をのばしたいのですが、どうやればよいでしょうか。 現在の状況ですが、 /* ここからcss ------------------------------------ */ *{ color: #333333; font-size: 12px; line-height: 20px; text-decoration: none; margin: 0; padding: 0; word-wrap:break-word; } html { height: 100%; margin: 0px; padding: 0px; background-color: #9999cc; background-image:url(../img/bg.jpg); background-position:center; background-repeat:repeat-y; } body { margin: 0px; padding:0px; color: #333; text-align:center; font-family:"メイリオ",Meiryo,"MS Pゴシック", Osaka, sans-serif; } 本当に困っております。 誰かわかる方がいらっしゃればよろしくおねがいいたします。

    • ベストアンサー
    • CSS
  • 2重に背景画像を

    質問をさせていただきます。 画像のようにこれまでは 赤のBのみをbodyに指定して パターンイメージを並べていました。 そこでその上にAの様な横だけに並べるPNG画像の背景が 欲しいとおもったところこのようなサイトを見つけました。 ttp://www.bnote.net/css/css_layout/tips_html_back.html このサイト方がおっしゃられている様に htmlにback-groundでBを指定 bodyにAを指定すれば出来る! と思ったのですが上手くいきません。 htmlにBを並べるのは成功しました。 しかしbodyにAを指定してはめこむと pngの黄色い部分が透過されず白背景になってしまいました。 bodyにbackground-color: transparent;を指定したりと 試しましたがなんとも上手くいきません。 何かアドバイス等ございましたらよろしくお願いします! 今は html { background-image:url(○○○○○.gif) } body { height : 100%; text-align:center; font-size:16px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; line-height: 1.6; background-color: transparent; background-image:url(○○○○○.png); background-position: left top; background-repeat: repeat-x; } となっております。

    • ベストアンサー
    • CSS
  • macのsafariとFirefoxで背景が表示されない

    bodyとcontainerで背景をリピートさせています。 WindowsのIE6、IE7、Firefoxでは背景は正常に表示されるのですが、macのFirefoxとsafariでは背景がまったく表示されません。 どうしたら表示されるか、どなたかお教えいただけませんでしょうか。 body { margin: 0; background-image:url(bg.gif); background-position:top; background-repeat:repeat-x; text-align:center; } #container { width:776px; margin:0px auto; background-image:url(main.gif); background-repeat:repeat-y; text-align:left; }

    • ベストアンサー
    • CSS
  • IEのみでCSSのbottomが効かない。

    IEのみ、CSSのbottomが効かない現象に悩まされております... こちらを改善する方法をご存知の方は、ご教授いただけますと大変に助かります。。 以下がCSSに記述しているプラグラム内容となります。 body{ position: relative; background-image: url(../image/bg/t_bluestick.jpg), url(../image/pattern/navi_pt.png), url(../image/gnavi/bg.png), url(../image/gnavi/bg_pt.png), url(../image/header/header_img3.png), url(../image/pattern/footer_white_pt.png), url(../image/footer/footer_pt.png), url(../image/pattern/dec_pt_50.png), url(../image/bg/pt_whitetile.png) ; background-repeat: repeat-x, repeat-x, no-repeat, repeat-x, no-repeat, repeat-x, repeat-x, repeat-y, repeat ; background-position: top, center 321px, center 321px, center 311px, center 23px, bottom, bottom, center 10px, center ; background-color: #BFE5FF ; } 何卒よろしくお願い申し上げます。

    • ベストアンサー
    • CSS
  • 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; } どなたかご教授いただけませんでしょうか。 宜しくお願いいたします。

    • ベストアンサー
    • CSS
  • Firefoxで背景画像が表示されず困っています

    サイトを作り確認してみたところ、 IEでは背景画像がきちんと表示されるのですが Firefoxでは表示されないようです。 下記のように入力しているのですが、何が原因なのかわかりません…。 詳しい方、教えていただけないでしょうか。 <!-- BODY {      background-image: url(http://aaaaa.jpg); background-color: #ffffff; background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; } -->

    • ベストアンサー
    • HTML
  • firefoxでcssを使った時背景画像が表示されない

    CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか? それともそのような仕様なのでしょうか? よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);

  • 掲示板の背景が更新すると無くなってしまいます

    今自分の掲示板を持っているのですが、 掲示板に新しい背景を素材として入れたところ、 カスタマイズの際の更新では上手く表示されたのですが、 ページに戻って更新した際に 画像がなくなってしまいます・・。 どこが問題なのでしょうか・・? 全く分からないのでよかったら教えてください・・。 背景画像(紫の険の画像urlはhttp://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpgです) </div> </body> </html> <NOTITLE> <html> <head> <style type="text/css"> <!-- body{ background-color:#FFF; } ul{ } a:link { color:#003366; } a:visited { color:#003366; } a:hover { color:#3399CC;} DL{ font-size:14px; color:#000; } DT{ font-size:14px; color:#000; margin:5px 5px 0; } DD{ font-size:14px; color:#000; margin:5px 0 15px 20px; } H1{ font-size:21px;color:#3399CC; padding:25px 5px 10px; } H2{ font-size:14px;color:#FF9900; padding:3px 5px;margin:0; background-image:url(http://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpg); background-repeat:repeat-y; background-color:#FFFFDD; border:1px solid #777777; } H3{ font-size:14px;color:#FF9900; padding:3px;margin:0; background-color:#FFF; border:1px solid #777777; } HR.ad { width:100%; height:1px; background:#3091C1; text-align:center; border-width:0px; margin-left:0px; color:#3091C1; } --> </style> </head> <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" style="background-image:url(http://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpg)background-repeat:repeat-y;width:100%;margin:0;padding:0;"> <div style="background-image:url(http://b-cures.net/material/bg/moonsword/bg_moonsword_pur.jpg);background-repeat;width:100%;height:auto;" align="right">

  • IEで画像が表示できません

    Firefoxでは画像が表示できるのですがIEでは表示されません スタイルーシートは下記のとおりです。 お願いいたします。 body {background: url("http://pub.ne.jp/man96/image/user/1170964897.gif") repeat-y; background-position:0px 0px; padding: 1;} a { color: #66c; text-decoration: none; } a:link { color: #66c; text-decoration: none; } a:visited { color: #66c; text-decoration: none; } a:active { color: #66c; text-decoration: none; } a:hover { color: #66c; text-decoration: underline; } h1, h2, h3 { margin: 0px; padding: 0px; } #banner { font-family: verdana; color: #777; font-size: 13px; font-weight: bold; text-align: 0px 0px; margin-bottom:11px; background: #ccffff この画像がIEで表示されなくて背景色です url("http://pub.ne.jp/man96/image/user/1170626058.jpg")no-repeat; background-position: center;padding:0px;height:250px; } ちなみにURL:http://pub.ne.jp/man96/です

  • 上部と下部にx-repeat∞の背景画像を置きたい

    html { background-image: url(../images/design_02.jpg); background-repeat: repeat-x; background-position: top; } body { font-family: sans-serif; color: #333333; background-color: #ffffff; background-image: url(../images/design_47.jpg); background-repeat: repeat-x; background-position: bottom; } でcssを組んでいます。 画面一杯に、ヘッダーを含めた上部、フッターを含めた下部にグラデ背景を乗せたデザインにしたいのですが、上記cssでは緩衝しあうのか、bodyで置いた画像しか表示されません。 このようなデザインにしたい場合、どのようなcssにすれば良いのでしょうか。

    • ベストアンサー
    • CSS

専門家に質問してみよう