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

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

NGとなった記法

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

CSS
#haikei-appooo {
  background: url(./img/appooo.jpg) no-repeat 0 0 / cover;
}
apple-アッポー

対応

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

CSS
#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で配置して・・の場合はこのくらいの省略記法でも大丈夫。

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

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

お役に立ちましたら、シェアしていただけると嬉しいです😀

はてなブックマークに追加Add
クリップボードにコピーCopy URL
Author

林@零細Web屋

名古屋の自営業者(フリーランス12年目)です。中小/個人の事業者さんが抱えるお悩みの解決・目的達成のお役に立てるよう、Webサイト制作&運用支援を行っています。かつて中小企業で情報システム・広報・採用などを担当していた経験を活かし、受け手の目線に立った仕事を心がけています。

» プロフィール詳細 » 問い合わせてみる