Firefoxで背景画像が表示できない場合の対処方法

2018.08.13

Chromeでは表示できているのに、Firefoxでは背景画像が表示できないという問題が起こりました。

svgの書き出し方なのか、パスの指定の仕方なのかなど、解決までに検討しましたが、問題は背景画像のショートハンドの書き方でした。

背景についての記述をまとめて、background: の中に記載していたのですが、その順番に問題がありました。

【FFで表示されなかった記載】
background: url(../img/〇〇.svg)center center no-repeat /contain;

【FFで表示される記載】
background: url(../img/〇〇.svg)center center no-repeat /contain;

つまり、サイズ指定である「/cotain」は、位置指定「center」などの後に記載する必要があるということのようです。

CSSの表記方法の誤りのようなのですが、Chromeで表示できていただけに、解決までに時間がかかってしまいました。

もし同じような問題が生じている方は、記載の順番に誤りがないか一度確認してみて頂ければと思います。


最新の投稿

お問い合わせ・お見積り(無料)






Contact