最近ではスマフォサイトだけではなくPCサイトでもCSS3を使う事が多くなって来ました。
そこで私がよく使うbackground-sizeに関するメモ書きです。
Contents
分けて書く場合
background:url(images/bg.png) 0 2px no-repeat;
background-size:13px 13px;
この書き方が私は一番多いですね。
注意点
この書き方の場合background-sizeがbackgroundの後にある事が重要です。
例えばこの様な書き方をしたいケースがあるかと思います。
ul li {
width:13px;
height:13px;
background-size:13px 13px;
}
ul li.img0 {
background:url(images/bg0.png) 0 0 no-repeat;
}
ul li.img1 {
background:url(images/bg1.png) 0 0 no-repeat;
}
この場合iOS6等のCSS2仕様のUAでは問題無かったのですが、
iOS7等backgroundのショートハンドがCSS3仕様対応のUAではbackground-sizeがうまく効きません。
それはbackground-sizeより後に記述したbackgroudショートハンドプロパティで上書きされるからです。
この場合はbackground-size:auto auto;を指定していることになります。
この場合backgroudショートハンドを全て分ける事で対応出来ると思います。
ul li {
width:13px;
height:13px;
background-size:13px 13px;
background-position:0 0;
background-repeat:no-repeat;
}
ul li.img0 {
background-image:url(images/bg0.png);
}
ul li.img1 {
background-image:url(images/bg1.png);
}
まとめて書く場合
background:url(images/bg.png) 0 2px / 13px 13px no-repeat;
とCSS3仕様の書き方をします。
注意点
この書き方はUAによって対応状況が違う様ですので私はあまり使用していませんが
使用される方は、特にスマフォサイト等はチェックされることをオススメします。