CSS - background-size: cover; funktioniert nicht im Firefox

body{
    background-image: url("./content/site_data/bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Lobster', cursive;
}

Check: http://demo.jayantbhawal.in auf firefox-Browser, NICHT im widescreen-Modus.

Der code funktioniert auf Chrome(Android + PC) und auch die stock-Android-browser, aber NICHT in Firefox(Android + PC). Gibt es irgendeine gute alternative? Warum ist es sowieso nicht funktioniert? Googeln dieses Problem viele Male, aber niemand scheint dieses problem haben. Geht es nur mir so? In jedem Fall, wie kann ich es beheben?
Es gibt durchaus einige Fragen auf, SO über Sie zu, aber keiner von Ihnen eine legitime Lösung, so jemand kann nur sagen Sie mir, wenn Sie haben background-size: cover; - Probleme bei firefox auch?

Also im Grunde sagen Sie mir 3 Dinge:
1. Warum ist es passiert?
2. Was ist eine gute alternative?
3. Passiert das Euch auch so?? Der Firefox-Browser natürlich.

Chrome Version 35.0.1916.114 m
Firefox Version 29.0.1

Hinweis: ich kann schon versuchen, es zu beheben, so dass manchmal Sie können sehen, eine Total schräge Seite. Etwas warten und neu laden.

möglich, Duplikat der Warum nicht -moz-background-size:cover in Firefox?

InformationsquelleAutor Jayant Bhawal | 2014-06-08

7

Gut, es sieht gut zu mir in mozilla.

Versuchen Sie dies, wenn Sie mit Problemen konfrontiert
```
body { 
  background: url("./content/site_data/bg.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Lobster', cursive;
}
```
Bearbeiten

Einige mehr Freiraum für eine Antwort zu OP von Kommentaren
```
background: url("./content/site_data/bg.jpg") no-repeat center center fixed;
```
Seine Abkürzung für,
```
background-image: url("./content/site_data/bg.jpg");
background-repeat:no-repeat;
background-position: center center;
background-attachment:fixed;
```
Lesen Sie hier mehr
- "Check: demo.jayantbhawal.in auf firefox-Browser, NICHT im widescreen-Modus." Das war die erste Zeile meiner Frage, nach dem code.
- verwenden Sie den code ich schlug vor, Probleme werden gelöst.
- Haben Sie immer noch Probleme mit oben genannten codes?
- Es funktioniert! Es funktioniert! Und es funktioniert ohne das Präfix aber! Aber ich muss Fragen, warum sollten Sie diese " no-repeat center center fixed; "?
- Seine Abkürzung für, background-image: url(path-to-file/img.jpg); background-repeat:no-repeat; background-position: center center; background-attachment:fixed;
- Obwohl es funktioniert, ich verstehe nicht, warum firefox benötigt es und nicht chrome.
- Lassen Sie uns weiter, diese Diskussion im chat.
InformationsquelleAutor 4dgaurav
1

So, ich kam gerade über diese Frage, denn ich hatte das gleiche problem. Es stellte sich heraus, das Problem (in meinem Fall jedenfalls) war nicht mit
```
<!DOCTYPE html>
```
an der Spitze meiner html-Datei (dies schien nur zu beeinflussen, die background-size: cover in Firefox.

InformationsquelleAutor potato83
0

background-size wurde Hinzugefügt, um Firefox 3.6, aber die -moz-vendor-Präfix erforderlich war.

verwenden
```
-webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
```
- Ich habe versucht, mit Präfixen, aber ich habe aufgehört, mit Ihnen, der es vielleicht üben, aber ich noch nicht in Problemen, die nicht mit Ihnen in den neuesten Browsern. Wenn ich das mache, verwende ich em. Aber nur um sicher zu sein, wieder, ich habe den Präfixen, und es ist nichts passiert. Auch Sie wissen, dass die Verwendung von background-size: 100% 100%; für Vollbild-Bild-hintergrund wäre grundsätzlich eine Katastrophe Recht? Stellen Sie sich eine große, QUADRATISCHE Hund mit Gesicht Bild als Hintergrundbild mit background-size: 100% 100%; und nutzen diese Website auf einem 16:9 monitor. Du bekommst von mir richtig?
InformationsquelleAutor Ann Ragg
0

bhawal,
Ich glaube, Sie sind mit einer älteren version von mozilla. Gut, das ist die übliche Vorgehensweise zum hinzufügen von herstellerspezifischen Präfix-Eigenschaften zusammen mit dem W3-standard. Wir tun dies nur, um sicherzustellen, dass es funktioniert in den meisten Browsern.
In Ihrem Fall können Sie die CSS-Regel unten:
```
body { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
```
Lassen Sie mich wissen, wenn dies nicht funktioniert; und die Stimme, wenn es funktioniert. 🙂
- Ich habe versucht, mit Präfixen, aber ich habe aufgehört, mit Ihnen, der es vielleicht üben, aber ich bin nicht gekommen, über irgendwelche Probleme, nicht mit Ihnen. Wenn ich das mache, verwende ich em. Aber nur um sicher zu sein, wieder, ich habe den Präfixen, und es ist nichts passiert. Und ich hatte die Firefox-version ich verwende. @Nitesh
- Tut mir Leid @Nitesh, habe ich nicht bemerkt "no-repeat center center fixed;" dieser Zusatz, es funktioniert aber. Danke! 😀 Es funktioniert ohne die Präfixe auch.
- Ich hoffe, Sie Stimmen dann die Antwort, Mann. Es tut mir Leid ich habe die FF-version beim Lesen Ihrer Frage.
- Hmm, zwei Dinge. 1. Fragen Sie nie für eine Abstimmung, es ist einfach nur seltsam. 2. Ich habe Stimmen up, cuz es war die richtige Antwort. Jemand anderes gewählt, so scheint es.
InformationsquelleAutor Nitesh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.