web-dev-qa-db-ja.com

Firefoxで背景画像が表示されない

DIVの背景として設定された画像はIEでは表示されますが、Firefoxでは表示されません。

CSSの例：

div.something {
background:transparent url(../images/table_column.jpg) repeat scroll 0 0;
}

（問題は多くの場所で説明されていますが、決定的な説明や修正は見ていません。）

cssfirefoximagebackground
19
user46665

すみません、これは巨大になりましたが、それは私に一貫して起こる2つの可能性をカバーしています。

可能性1

CSSファイルへのパスが正しくない場合があります。例えば：

次のファイル構造があるとします。

_public/
    css/
        global.css
    images/
        background.jpg
    something/
        index.html
    index.html
_

_public/index.html_では、次のパスにCSSファイルが含まれます。

_#1:  <link href="./css/global.css"
#2:  <link href="/css/global.css"
#3:  <link href="css/global.css"
_

ただし、_public/something/index.html_では、1と3は失敗します。このようなディレクトリ構造（またはMVC構造（例：_http://localhost/controller/action/params_））を使用している場合は、2番目のhrefタイプを使用します。

Firebugの[ネットモニター]タブには、CSSファイルを含めることができないかどうかが表示されます。

パスについては、画像はCSSファイルのパスに相対的であることを忘れないでください。そう：

_url('./images/background.jpg') /* won't work */
url('../images/background.jpg') /* works: ../ == up one level */
_

Firebugの[CSS]タブで背景属性のurl()部分にカーソルを合わせて、ファイルが読み込まれているかどうかを確認します。

可能性2

divにはコンテンツがないため、高さが0である可能性があります。 divに少なくとも何かの行があることを確認してください（例：lorem ipsum delors secorum）または：

_div.something {
    display: block; /* for verification */
    min-height: 50px;
    min-width: 50px;
}
_

（HTMLタブの）Firebugのレイアウトタブをチェックして、divに高さ/幅があることを確認します。

13
Ross

奇妙なことに、キーボードで頭を何時間も叩き潰した後、display：tableを追加しました。 DIVのスタイルに合わせて、背景画像がFFで魔法のように表示されました。

7
Eric

背景の添付に関する問題のようです。 FFで動作させるには、スクロールではなく固定に設定する必要があります。参照： http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position

5
a avant

私と一緒に起きなさい。 jpgはIE=に表示されますが、FirefoxまたはChromeには表示されません。これが解決策です

画像が表示される要素の次のcssを変更します。 span、div、またはその他の要素を使用できます。

表示ブロック

3
Hammad

古い投稿ですが、Firefoxに表示されない同様の問題の画像があったので、広告ブロックアドオンであることがわかり、画像の名前を変更する必要がありました。

1
ramon22

画像名を引用符で囲みます。例：

background-image: url('image.jpg');
1
Philip Morton

参照する画像がhtmlファイルではなくcssファイルに関連していることを確認してください。

1
GateKiller

これを試して。

background-color: transparent;
background-image: url("/path/to/image/file.jpg");
background-repeat: repeat;
background-position: top;
background-attachment: scroll;
1
Mike Geise

私にとっては、ファイル名の大文字と小文字が区別されるという問題でした。 CSSなのか、Ubuntuオペレーティングシステムなのか、Firefoxなのかはわかりませんが、最終的に背景画像を表示する方法は、bluegrad.jpgではなくBlueGrad.jpgを参照することでした。前者は保存された方法です。大文字と小文字が区別されるとは思わなかったが、そうだった。

1
Stuart

CSSクラスの名前を変更して、同様の問題を解決しました。 MSIEでは、CSSクラスIDを数字で始めることができます。 Firefoxはサポートしていません。画像の幅をピクセルで使用してクラスを作成しました。 .1594px-01a

私は実際には非標準の構文であることを知っていましたが、MSIEで正常に動作していたため、そのことを忘れていました。他のすべてのものを試した後、ネーミングと同じくらい簡単なものであることに気づき、クラスの前に手紙を置くとすぐに、プレスト！

1
Randall

ページ/スタイルシートに関連するURLを使用する代わりに、クロスブラウザソリューションは、アプリケーション/ドメインルートで始まる相対URLを提供することです。


/* Relative to Stylesheet (Works in Firefox) */
background: url('../images/logo.gif');
/* Relative to Page (Works in IE, Chrome etc.) */
background: url('images/logo.gif');
/* Absolute path (Fine, unless you change domains)*/
background: url('http://www.webby.com/myproduct/images/factsheet.gif');
/* Domain Root-relative path (Works in Firefox, IE, Chrome and Opera) */
background: url('/myproduct/images/factsheet.gif');

参考までに、私が懸念している限り、CSS URLで引用符を使用する必要はありません。見栄えが良いため、ここでは引用符を使用しました。

1
Astravagrant

この問題を引き起こしている2つのことがわかりました。

  1. Firefoxが気に入らなかった.tifファイルを使用していました-.pngファイルに変更しました。
  2. 追加した overflow:auto;をdivのCSSに-display:block;が機能しませんでした。
0
PeterM

画像がJPGファイルであり、PNG /その他のファイルではないことを確信していますか？

IEを使用すると、他のブラウザでは不可能なことを回避できますか。

同様に、ファイルの大文字と小文字は指定どおりですか？

0
scunliffe

とても奇妙に見えるかもしれませんが、これは私にとってはうまくいきます>

#hwrap {
background-color: #d5b75a;
background: url("..//design/bg_header_daddy.png"), url("..//design/nasty_fabric.png");
background-position: 50% 50%, top left;
background-Origin: border-box, border-box;
background-repeat: no-repeat, repeat;
}

はい、ダブルドットとダブルスラッシュ... ?? !! ?? ...インターネット上で、この奇妙な行動を報告するものは何も見つかりません。

[編集]私は別の投稿をしました> https://stackoverflow.com/q/18342019/529802

0
REDFOX

このようなHTML「ベース」タグがあります

<head>
   <base href="http://example.com/some/bizarre/directory"/>
</head>

これがページに存在する場合、URLの画像は現在のURLに対してではなく、指定されたベースURLに対して相対的です。 IEが表示し、Firefoxが表示しない理由はわかりません。

Webdeveloper Firefox拡張機能は、「壊れた画像を表示する」オプションを提供します-これは便利かもしれません。また、「 Live Http Headers 」を試して、リクエストされた画像とその画像、および戻りコードを確認することもできます。

0
Olaf Kock

（これらはOPの正確な状況ではないようですが、問題はある程度関連しており、共有したい回避策を見つけました）

私は同じ問題を抱えていました-Firefoxを除いてどこでも背景画像が見える-そして私にとって、問題は私がブラウザーのアドオンに取り組んでいるという事実に関係していました。

pageModモジュールにcontentStyleFile属性を指定してファイル_style.css_を挿入しています。その中に、ルールbackground-image: url(/img/editlist.png);があり、ここで画像ファイルexternalをアドオンに参照しています。ここでの問題は、Firefoxが他のブラウザーとは異なり、この外部ドメインルートをアドオンの内部ルートとして誤って解釈することです。

Css-fileは、拡張機能/アドオンのChromeバージョンからの1：1ポートであるため、それをいじりたくありませんでした。そのため、追加のcontentStyleルールとリソースフォルダー内のそのイメージのコピーの組み合わせこのルールは、cssファイル内のルールを上書きするだけです。

（後から考えると、おそらく以前よりもエレガントな方法になるかもしれません…）

0
WoodrowShigeru

すでに言われたこと以外に私が考えることができる他の唯一のものは、絵が作成された方法です。 Photoshopで画像を作成/編集した場合は、Web用に保存として保存してください...

Web画像として保存せずにPhotoshopでJPG画像を使用すると、Firefoxに表示されない場合があります。数週間前、グラフィックアーティストがミニサイトの美しいヘッダーを作成しましたが、FFには表示されませんでした。

待つ...

Divに幅と高さを設定して展開してみてください。それはあなたのdivのコンテンツがない問題であるかもしれません。

0
tahdhaze09

あなたはこれを試すことができます：

div.something {
background: transparent url(../images/table_column.jpg);
}

他の宣言は省略形のCSSプロパティであり、私はそれらが必要ではないことを知っています。
これをオンラインでどこかに持っていますか？少しいじくれるか試してみたい。 （ローカル）

0
Kablam

私が恐れている回答よりも多くの質問が、正しい回答を得るのに役立つかもしれません：

Firefoxのdivをなんらかの方法で（いくつかのフロートなどで）折りたたんでいる可能性はありますか？

Divには、画像を表示するのに十分な大きさのコンテンツが他にありますか？

Firebug をインストールして、ページのCSS定義を確認しましたか？

0
Zhaph - Ben Duguid

同様の問題がありました。その理由は、FirefoxがCSSで欠落しているフィールドに対して敏感であるためです。 Chrome欠落フィールドが（時々）自動補完されるため、Firefoxブラウザで問題が発生します。

現在、高さ0に変換されているため、表示タイプを追加する必要があります。

私の場合：

.left-bg-image {
    display: block; // add this line

    background-image: url('../images/profile.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: .6;
    min-width: 100%;
    min-height: 100vh;
}
0
Haim

私の間違いは、「/」の代わりに「\」を使用することでした。 IEでは問題なく動作しましたが、他のブラウザでは動作しませんでした。

0
Riho

FFで問題が発生し、Chromeでは発生しない場合：

ポジションの異なる値タイプを誤って混在させる可能性があります。

例えば、

background: transparent url("/my/image.png") right 60%  no-repeat;

このエラーが発生します。修正は次のとおりです。

background: transparent url("/my/image.png") 100% 60%  no-repeat;
0
valk

誰も言及しなかったbackground-Originだからあなたはそこに行く：

background-image:url('dead.beef');
background-size: 100% 100%;
background-Origin:border-box;

私のために問題を解決しました。私の背景は明らかに私のdivの外にありました。

0
Erwan Clügairtz

FFのCSS background-imageプロパティに関して同様の問題がありました。 IEでうまくいきましたが、FFでの作業は拒否しました;）いくつかの投稿を読んだ後、問題は確かにdivにテーブル以外のコンテンツがないことを確認しました（私は試していました背景画像を折りたたんだり拡大したりせずにブラウザのサイズに合わせるため、divの背景にはるかに大きな画像を使用して、一種の「トリミング」を作成しました。私にとっての解決策は、空白の.pngファイルを表示するimgタグを配置して 'チート'し、幅を100％に設定して画像の正しい高さに再調整しました。これは私の問題に役立ちました。同様の問題に遭遇している他の人に役立つことを願っています。おそらく最良の修正ではありませんが、修正です;）

0
J. Ryan