[CSS] 背景画像がPC版Safariのみ表示されなかった例

background-image:XXXXXX; の省略記法を使っていて、PC版Safariのみ何も表示されなかった、ということがあったので覚書。

NGとなった記法

PC版Safariは、Mac/Windows共に背景画像表示されず。
ちなみにiOSのモバイルSafariでは表示されるという(((^_^;;
また同じwebkit系でも、Chromeはこの省略記法で問題なし。

#haikei-appooo {
  background: url(./img/appooo.jpg) no-repeat 0 0 / cover;
}

対応

background-size を バラして記述して解決

#haikei-appooo {
  background: url(./img/appooo.jpg) no-repeat 0 0;
  background-size: cover;
}

no-repeat の後の 0 0 は x, y の表示位置。

background-position: 0 0; や
background-position: left top; と同義。

省略記法を使ってしまった経緯 ⇒ Firefoxの拡張機能：Firebug（現在標準となっている Developer Tool の元になった Legacy Add-On） でコード解析した時に、分けて書いてた箇所も冒頭の省略記法で表示されており（お、これでいいなら、これから楽チン！）と思ったものの・・・結局、あとで戻す羽目に；

ついでメモ：

背景色を敷いて・ロゴなどを透過pngで配置して・・の場合はこのくらいの省略記法でも大丈夫。

#header {
  background: rgba(0,79,39,0.9) url(./img/logo.png) no-repeat 0 0;
  background-size: 145px auto;
}

結論：background-size は 分けて書かないとハマる