マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

CSS

CSS3でのbackground-sizeの記述方法色々と注意点

投稿日:2014年6月2日 更新日:

最近ではスマフォサイトだけではなくPCサイトでもCSS3を使う事が多くなって来ました。
そこで私がよく使うbackground-sizeに関するメモ書きです。

分けて書く場合

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によって対応状況が違う様ですので私はあまり使用していませんが
使用される方は、特にスマフォサイト等はチェックされることをオススメします。

-CSS

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

「CSSを設定したのに効かない!?」っていうことありますよね。 その場合、一概には言えませんが、もしかしたらCSSの書き方が原因かもしれません。 下記を参考に、CSSを書き直せば直る可能性もぐっと高ま …

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

今回はCSS3を使ったレイアウトで使えるbox系プロパティを使ってみました。 このbox系のプロパティを使えばCSS2等で使っていたfloatやtable-cellプロパティを使わずに横並びレイアウト …

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

「SVG」というイメージフォーマットをご存知でしょうか? SVG(Scalable Vector Graphics)とはIllustratorで制作されるような、ベクターデータをWEB上で表示すること …

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第一弾として「個性的な英字フォント( …

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

デザインを格好よくするためにシャドウを付けたりしますよね。 しかし、サイズが異なるたびに画像を背景に指定したりしなければならないのは大変です。 しかも、シャドウの幅の分だけはみ出ているということもあり …