マーカーネット株式会社

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カラーコードを16進数からRGBに変えた理由

CSSカラーコードを16進数からRGBに変えた理由

最近コーディングをする際、特にスマフォサイトの場合は特に スタイルシートのカラーコードを16進数ではなくRGBで記述する事が増えました。 私がカラーコードにRGBを使う様になった最大の理由がRGBの場 …

CSS3の便利機能紹介。

CSS3の便利機能紹介。 http://www.markernet.co.jp/blog/2015/09/03/post-6063/ Facebook

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

画像のロールオーバーって面倒ですよね。 2枚の画像を用意してJavascriptで制御して、、や背景画像していしてh overで、、 というのが一般的ですが、 今回は画像1枚だけ。CSSに4行記載する …

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

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

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

知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】

CSS3のセレクタは幾つもありますよね。 今回はその中の構造疑似クラスで、私がよく使う便利な構造疑似クラスをご紹介します。 E:first-child 親要素の最初の子要素であるE要素に適用 E:fi …