cssはChromeで背景画像を読み込みますが、Firefoxでは表示されません

Question

私はクロームでスムーズに動作する1つのウェブサイトを開発しました。それはFirefoxで問題があります。背景画像を読み込めません。このhappen.PleaseチェックアウトはChromeと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

にあなたが "ブロック" に表示を設定しなければならない理由を私は理解していません。
これで動作するはずです。

Answer 2

display: inline-blockプロパティを削除すると、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 */ 
} 

プロパティを削除すると他の違いはないようですので、最初に使用された理由はありますか？

また、ちょうどメモ、私はクロム/サファリのブラウザにのみ影響するmedia only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not allルールが使用されていたことに気づいた。

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