it-swarm.com.de

Hintergrundbild wird nicht in Firefox angezeigt

Ein Bild, das als Hintergrund eines DIV festgelegt wurde, wird im IE angezeigt, jedoch nicht in Firefox.

CSS-Beispiel:

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

(Das Problem wird an vielen Stellen beschrieben, hat jedoch keine schlüssige Erklärung oder Korrektur gefunden.)

17
user46665

Tut mir leid, dass dies riesig wurde, aber es deckt zwei Möglichkeiten ab, die mir immer wieder passieren.

Möglichkeit 1

Möglicherweise ist der Pfad zur CSS-Datei nicht korrekt. Zum Beispiel:

Angenommen, ich habe die folgende Dateistruktur:

public/
    css/
        global.css
    images/
        background.jpg
    something/
        index.html
    index.html

Auf public/index.html enthalten die folgenden Pfade die CSS-Datei:

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

Bei public/something/index.html schlagen Nummer 1 und 3 jedoch fehl. Wenn Sie eine solche Verzeichnisstruktur verwenden (oder eine MVC-Struktur, z. B. http://localhost/controller/action/params), verwenden Sie den zweiten href-Typ.

Die Firebug-Registerkarte "Net monitor" informiert Sie, wenn die CSS-Datei nicht eingebunden werden kann.

Denken Sie beim Thema Pfade daran, dass Bilder relativ zum Pfad der CSS-Datei sind. So:

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

Bewegen Sie den Mauszeiger über den Teil url() des Hintergrundattributs auf der Registerkarte "Firebug", um zu überprüfen, ob die Datei geladen wird.

Möglichkeit 2

Es kann sein, dass die div keinen Inhalt hat und somit eine Höhe von 0 hat. Stellen Sie sicher, dass das Div mindestens eine Zeile mit etwas enthält (z. B. Lorem Ipsum Delors Secorum) oder:

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

Überprüfen Sie die Firebug-Registerkarte "Layout" (der Registerkarte "HTML"), um zu überprüfen, ob das div eine Höhe/Breite hat.

11
Ross

Seltsamerweise fügte ich, nachdem ich stundenlang meinen Kopf auf der Tastatur zerschmettert hatte, folgendes hinzu: table; in DIVs Stil und das Hintergrundbild erschien magisch in FF.

7
Eric

Es sieht aus wie ein Problem mit Hintergrundanhängen. Es muss auf "fixed" gesetzt sein (nicht scrollen), um in FF zu funktionieren. Siehe: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position

5
a avant

Happend mit mir Das jpg wird in IE gezeigt, jedoch nicht in Firefox oder Chrome. Hier ist die Lösung

Ändern Sie das folgende CSS für das Element, in dem das Bild angezeigt wird. Es kann span, div oder ein anderes Element sein:

bildschirmsperre

3
Hammad

Versuchen Sie, den Bildnamen in Anführungszeichen zu setzen, z.

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

Stellen Sie sicher, dass das Bild, auf das Sie sich beziehen, relativ zur CSS-Datei und nicht zur HTML-Datei ist.

1
GateKiller

versuche dies.

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

Für mich ging es darum, dass der Dateiname die Groß- und Kleinschreibung berücksichtigt. Ich bin mir nicht sicher, ob es sich um CSS oder um mein Ubuntu-Betriebssystem oder um Firefox handelt, aber ich bekam die Hintergrundbilder schließlich zur Anzeige, indem ich auf BlueGrad.jpg statt auf bluegrad.jpg Bezug nahm. Die erste der beiden ist, wie es gerettet wurde. Ich hätte nicht gedacht, dass dies die Groß-/Kleinschreibung betrifft, aber es war so.

1
Stuart

Ich habe ein ähnliches Problem gelöst, indem ich die CSS-Klasse umbenannt habe. MSIE erlaubt CSS-Klassen-IDs, mit Zahlen zu beginnen. Firefox nicht. Ich hatte eine Klasse mit der Breite des Bildes in Pixel erstellt, z. .1594px-01a

Ich wusste eigentlich, dass es eine nicht standardisierte Syntax war, aber da es in MSIE gut funktionierte, hatte ich es vergessen. Nachdem ich all die anderen Sachen ausprobiert hatte, wurde mir endlich klar, dass es eine einfache Bezeichnung sein könnte, und sobald ich einen Brief vor die Klasse stelle, presto!

1
Randall

Anstatt URLs relativ zur Seite/zum Stylesheet zu verwenden, gibt eine browserübergreifende Lösung eine relative URL an, die mit dem Anwendungs-/Domänenstamm beginnt.


/* 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');

Zu Ihrer Information: Für mich gibt es keine Notwendigkeit, Anführungszeichen in CSS-URLs zu verwenden. Ich habe sie hier verwendet, weil sie schöner aussieht.

1
Astravagrant

Ich habe zwei Dinge gefunden, die dieses Problem verursacht haben:

  1. Ich verwendete eine .tif-Datei, die Firefox nicht zu mögen schien - ich änderte eine .png-Datei.
  2. Ich habe overflow:auto; zum CSS hinzugefügt, da div - display:block; für mich nicht funktionierte.
0
PeterM

Sind Sie absolut sicher, dass das Bild eine JPG-Datei und keine PNG/Other-Datei ist?

Ich frage mich, ob IE Ihnen etwas erlaubt, das andere Browser nicht machen.

Ist der Fall der Dateien genau wie angegeben? 

0
scunliffe

Es mag sehr seltsam aussehen, aber das funktioniert für mich>

#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;
}

Ja, ein doppelter Punkt und ein doppelter Schrägstrich ... ?? !! ?? ... Ich kann im Internet nichts finden, das dieses merkwürdige Verhalten meldet.

[edit] Ich habe einen separaten Beitrag erstellt.> https://stackoverflow.com/q/18342019/529802

0
redfox

Es gibt dieses HTML-Basis-Tag wie in 

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

Wenn dies auf Ihrer Seite vorhanden ist, ist das Bild für die URL nicht relativ zur aktuellen URL, sondern zur angegebenen Basis-URL. Ich würde nicht wissen, warum IE es anzeigt und Firefox jedoch nicht.

Die Erweiterung Webdeveloper Firefox bietet die Option "Defekte Bilder anzeigen" - dies kann hilfreich sein. Sie könnten auch " Live Http Headers " versuchen, um zu sehen, ob/welches Bild angefordert wird und was der Rückkehrcode ist.

0
Olaf Kock

Alter Post, aber ich hatte gerade ein ähnliches Problem, Bilder, die nicht in Firefox auftauchen, stellt sich heraus, dass es sich um Ad-Block-Add-On handelte, und musste die Namen meiner Bilder ändern 

0
ramon22

(Es scheint nicht, dass dies die genauen Umstände des OP sind, aber das Problem ist etwas verwandt und ich habe eine Problemumgehung für das gefunden, was ich teilen möchte.)

Ich hatte das gleiche Problem - das Hintergrundbild war außer in Firefox überall sichtbar - und für mich hatte das Problem damit zu tun, dass ich an einem Browser-Add-On arbeite.

Ich füge eine Datei style.css mit dem pageMod-Attribut in das Modul contentStyleFile ein. Darin gibt es die Regel background-image: url(/img/editlist.png);, bei der ich eine Bilddatei external auf das Add-On verweise. Das Problem hierbei ist, dass Firefox diesen externen Domänenstamm im Gegensatz zu anderen Browsern als internen Stamm des Add-Ons falsch interpretiert!

Die css-Datei ist eine 1: 1-Portierung aus der Chrome-Version der Erweiterung/des Add-ons, daher wollte ich mich nicht damit herumschlagen. Aus diesem Grund habe ich eine zusätzliche contentStyle-Regel in Kombination mit einer Kopie dieses Bildes in meinem Ressourcenordner hinzugefügt. Diese Regel überschreibt einfach die Regel in der CSS-Datei.

(Im Nachhinein vielleicht sogar eine elegantere Methode als zuvor…)

0
WoodrowShigeru

Das einzige, was mir außer dem bereits Gesagten einfällt, ist die Art und Weise, wie das Bild erstellt wurde. Wenn Sie das Bild in Photoshop erstellt/bearbeitet haben, stellen Sie sicher, dass Sie als "Für Web speichern" speichern.

Wenn Sie ein JPG-Bild für Photoshop verwenden, ohne es als Webbild zu speichern, wird es möglicherweise nicht in Firefox angezeigt. Ich hatte das vor ein paar Wochen, als ein Grafiker eine wunderschöne Kopfzeile für eine Mini-Site erstellte und diese NICHT in FF erscheinen würde!

Warten...

Legen Sie eine Breite und Höhe für das div fest, um es zu erweitern. Es kann ein inhaltliches Problem in Ihrem Div sein.

0
tahdhaze09

Sie könnten dies versuchen:

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

Die anderen Deklarationen sind kurze CSS-Eigenschaften, und ich bin der Ansicht, dass sie nicht benötigt werden.
Hast du das irgendwo online? Ich würde gerne sehen, ob ich damit ein bisschen herumspielen kann. (örtlich)

0
Kablam

Ich fürchte mehr Fragen als Antworten, aber sie können Ihnen helfen, die richtige Antwort zu finden:

Ist es möglich, dass Sie das div in Firefox auf irgendeine Weise zusammenbrechen (mit einigen Floats oder ähnlichem)?

Gibt es einen anderen Inhalt im div, um sicherzustellen, dass er groß genug ist, um das Bild anzuzeigen?

Haben Sie Firebug installiert und sich die CSS-Definitionen auf der Seite angesehen?

0

Ich hatte ein ähnliches Problem. Der Grund ist, dass Firefox auf fehlende Felder in Ihrer CSS reagiert. Chrome wird (manchmal) automatisch das fehlende Feld ausfüllen. Daher wird das Problem in Ihrem Firefox-Browser angezeigt.

Sie müssen einen Anzeigetyp hinzufügen, da dieser gerade in Höhe 0 übersetzt wird.

In meinem Fall:

.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

Mein Fehler war die Verwendung von '\' anstelle von '/'. Funktionierte im IE, aber nicht in anderen Browsern.

0
Riho

Für diejenigen, die das Problem in FF haben, aber nicht in Chrome:

Sie könnten fälschlicherweise verschiedene Werttypen für die Position kombinieren. 

Zum Beispiel, 

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

Werde diesen Fehler machen. Das Update könnte sein:

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

Niemand erwähnt Hintergrund-Herkunft so geht's:

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

Das Problem für mich gelöst; Mein Hintergrund war anscheinend außerhalb meines Div.

0

Ich hatte ein ähnliches Problem bezüglich der CSS-Hintergrundbild-Eigenschaft in FF. Es funktionierte gut in IE, lehnte aber die Arbeit in FF ab;) Nachdem ich ein paar Posts gelesen hatte, stellte ich fest, dass es sich tatsächlich um das Problem handelte, dass es keinen Inhalt im Div gab, außer einer Tabelle (ich versuchte, das zu erstellen Hintergrundbild an die Größe des Browsers anpassen, ohne zu kollabieren oder auszudehnen, und daher ein viel größeres Bild im Hintergrund des Divs verwendet, um eine Art "Beschneiden" zu bilden.) Die Lösung für mich schien einfach "Schummeln" zu sein. durch Platzieren eines img-Tags, das eine leere .png-Datei anzeigt, die ich dann auf die richtige Höhe des Bildes mit einer auf 100% gesetzten Breite eingestellt habe. Das hat für mein Problem funktioniert, und ich hoffe, es hilft allen anderen, die auf ein ähnliches Problem stoßen. Wahrscheinlich nicht die beste Lösung, aber es ist eine Lösung;)

0
J. Ryan