css lädt Hintergrundbild in Chrom, aber nicht in Firefox

Question

Ich habe eine Website entwickelt, die reibungslos in Chrom läuft. aber es hat ein Problem in Firefox. Es kann das Hintergrundbild nicht laden. Ich verstehe nicht, warum diese happen.Please Kasse in Chrome und Firefox

CSS

#background { 
    position: fixed; 
    z-index: 1; 
    background: url("../img/bg/photo_bg.jpg") 50% 50% no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    display: inline-block; 
} 

Answer 1

Sie die Anzeige auf "Block" setzen soll.
Es sollte damit arbeiten.

Answer 2

Wenn Sie die Eigenschaft display: inline-block entfernen, funktioniert sie auf beiden Chrome & FF.

background { 
    position: fixed; 
    z-index: 1; 
    background: url("../img/bg/photo_bg.jpg") 50% 50% no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    /* display: inline-block; -- remove this */ 
} 

Es scheint kein anderer Unterschied zu sein, wenn Sie die Eigenschaft entfernen, so gab es einen Grund, warum es in erster Linie verwendet wurde?

Auch nur eine Anmerkung, bemerkte ich, dass es eine media only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not all Regel verwendet, die nur die Chrome/Safari-Browser verwendet.

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not all { 
    #background { 
    background: url(../img/bg/photo_bg_%402X.jpg) 50% 50% no-repeat; 
    background-size: cover; 
    } 
}