2013/07/17目次Retina対応時に便利なプロパティ、background-sizebackground-sizeの指定方法background-sizeが効かない?1Retina対応時に便利なプロパティ、background-sizeRetinaディスプレイに対応するために、画像のサイズを1/2に指定したい時がある。img指定している時はzoom:0.5などを指定すればOKだが、背景に指定している時は、background-sizeでサイズを調整する。background-sizeの指定方法background-sizeプロパティは横幅と高さの2つを指定する。200px*40pxの背景画像を半分のサイズにしたい場合はこうだ。20px;その他にも、パーセンテージで指定することなども可能。background-size-CSS3リファレンスbackground-sizeが効かない?1ところが、chromeでブラウザチェックをしていると背景のサイズがオリジナルのまま表示されてしまった。調べてみると、背景画像の指定方法に問題があったようだ。【参考】こちらの記事が大変役立ったのでご紹介。201px;このように、ショートハンドを使って指定している場合、background-sizeプロパティが効かないブラウザがあるとのことそもそもbackground-sizeを指定する方法として、上記は正攻法ではない。寛容なブラウザが気を利かせて反映してくれていただけであって、ある意味chromeは正しい反応をしていたと言える。201px;この書き方に変えたら、正しく背景画像が半分のサイズで表示された。便利なショートハンドにも、意外な落とし穴があるようだ。CSS3html5広告Web・グラフィックデザイナー、マークアップエンジニア。関西在住のフリーランス。Edition運営中。【2019年振り返り】メニエール病で仕事ができなくなったフリーランスWebデザイナーの話こんにちは。Webookerです。Webデザイン4月26日までセール中!UdemyでフリーランスWebデザイナーの私が購入した講座一覧Udemyはオンラインで講義を受講できるWebサービスです。続きを読む...RSSリーダーで購読するWebookerはAmazon.co.jpアソシエイトに参加しています。