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

 
 

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

apple-アッポー

対応

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; と同義。


ついでメモ:

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

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


そもそもなんで省略記法を使い始めたかというと、Firefoxの拡張機能:Firebug でコード解析した時に、分けて書いてた箇所も冒頭の省略記法で表示されており(お、これでいいなら、これから楽チン!)と思ったものの・・・結局、あとで戻す羽目に^_^;

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



Firefox Developer Edition (開発者専用ブラウザ) 入れてみた
Firefox Developer Edition 不具合情報(主要アドオン×2との不和)
Firefoxレスポンシブデザインビュー デラ便利!Firefoxのレスポンシブデザインビュー
簡潔軽量!2KB弱でレスポンシブデザインを実装するCSS (グリッドシステム風)
レスポンシブ制作手法、CSS3のFlexboxに移行がヨサゲ… Android4.3以前の割合が減ったら
[UX] モバイルアンフレンドリーな箇所の修正:Googleからの是正勧告
エックスサーバー+WordPressにPHP7導入 ⇒ 問題なく動いてる&速くなった気が【PEAR追記あり】
ログイン状態だと埋め込んだFacebookページのウォールが表示されない 埋め込んだFacebookページのウォールが表示されない

Name * (必須)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

í
up