正しいbackgroundのショートハンドの使い方

background-sizeの指定が特殊

backgroundのショートハンドでbackground-sizeが効かなかったので解決策を載っけておきます。 background-sizeは使う順番さえ気を付けていれば特に難しくないことがわかりました。 あとは/がつくことだけです。

background ショートハンドの順番

ショートハンド書き順

background-color
background-image
background-repeat
background-attachment
background-position
background-size(前に/をつける)

略してcirapsシラプスです。はい。

この順番で書いていけば間違いないです。 注意点としてはbackground-sizeの前に/をつけること。 これを知らないせいで反映されなくて困った人もいるでしょう。

というかぼくがそうでした。笑

使用例

参考のショートハンドを書いてみます。参考までに。

/*デフォルト設定*/
background:transparent none repeat scroll 0% 0% /1;

/*繰り返しなし背景画像固定中央配置縦横比を保ちながら背景領域を覆う最小の大きさ*/
background:url(画像パス) no-repeat fixed center center/cover;