背景画像の拡大・縮小 → background-size ! - シンプルシンプルデザイン CSS
W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加されていますので、あらためてまとめてみます。 拡大・縮小による画像劣化が気になるところですが、許容できるかどうかの判断は個人差があると思います。近頃のブラウザは優秀で、いい感じでスムージングされるので「OK！」とぼくは判断しました。 さすがにIE6の拡大・縮小したときのジャキジャキ感は堪えられませんが、そもそも「background-size」は適用されず無視されるので、IE6では背景画像は拡大・縮小されません。 Safari、Google Chrome、Operaですでに実装されています。 Firefoxもプリフィックス「-moz-」で適用されます。 IE8では残念ながら未実装でした。。。この辺はプログレッシブエンハンスメントで乗り切り
スマートフォンサイトにおける背景画像のサイズ調整 | MJ-WAVE.COM
Retinaディスプレイとかとっても素敵なディスプレイのおかげで、 画像は大きめに作ってwidth属性等でちっちゃくする、工程が必要になりました。 imgタグで置いてる分にはwidth属性に数値入れちゃえばいいだけだけど、 じゃあ背景画像は？ってことで以下のようにします。 #hoge { background-image:url("images/bg.png"); /* ↑実際の画像のサイズは200px*200pxとする */ -moz-background-size: 100px 100px; /* Firefox */ -webkit-background-size: 100px 100px; /* Safari,Chromeなど */ -o-background-size: 100px 100px; /* Opera */ -ms-background-size: 100px 100
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
