その買うを、もっとハッピーに。|ハピタス

background-sizeの省略形

background-sizeの省略形はないのかとネット検索してみたけど、自分が探した時は全然紹介しているページがなく、やっぱりないのかなと諦め致し方なくbackgroundとbackground-sizeをそれぞれ分けて記述してました。
自分はよくSafariFirefoxの要素解析を使ってますが、自分の制作中のページをFirefoxで要素解析してたまたまbackgroundの記述が自分の書いた記述と違っててbackground-sizeまで纏めてられていることに気付きました。
background-sizeを省略するためには、以下のようにbackgroundに記述するようです。

background: url("./img/hoge@2x.jpg") no-repeat scroll 0% 0% / 100px auto;


background-positionの値の後ろにスラッシュを加え、その後にbackground-sizeの値を記述します。
この例では、hoge@2x.jpgのwidthが200pxでそれを高精細ディスプレイに対応するために半分の100pxを指定している感じですかね。
一通り最新の各ブラウザで動作に問題がないことを確認しましたが、もしかしたら動作しないブラウザもあるかもしれません。
とりあえずbackground-sizeの省略形が分かって良かった。


比較的新しいCSS3のプロパティとは言え、広く使われてるものだけに、どこかに情報があっても良さそうと思ったけど、単にGoogleの検索クエリ結果が良くなかっただけかも。